// 找到预览的 <img> 元素标签
var imageCopy = document.getElementById("savedImageCopy");
// 将画布内容在img元素中显示
imageCopy.src = canvas.toDataURL();

Canvas的例子从第一个讲到了现在的7个了，我们下面再来看一个HTML5中Canvas的使用例子了，希望这个例子可以帮助到各位同学哦。

通常使用<canvas>绘图时，后绘制的图形会覆盖在先绘制的图形上方，即遮住先绘制的图形。这是由于默认的合成操作时source-over。除了这种合成方式，还有其他许多合成方式告诉<canvas>怎么显示两个重叠的图形。

1，所有的合成操作及其效果

11种合成方式如下：source-over、source-in、soruce-out、source-atop、destination-over、destination-in、destination-out、destination-atop、lighter、copy、xor。
下面演示效果（先绘制一个矩形 ，再在上面绘制一个圆形）

2，如何设置合成操作方式

要改变<canvas>当前使用的合成操作方式，只要在画后面的图形之前设置绘图上下文的 globalCompositeOperation 属性即可。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//绘制矩形
context.fillStyle = "blue";
context.fillRect(15,15,100,100);
 
//选择globalCompositeOperation
context.globalCompositeOperation = "source-atop";
 
//在上方绘制圆形
context.fillStyle = "red";
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.fill();

Canvas不但可以绘制图形也可以做透明的效果了，下面我们来看一个HTML5 Canvas实现设置透明度使用样例例子，希望能加深你对canvas的一个理解了。

通常我们使用rgb()函数设置不透明的颜色，要实现半透明的颜色有两种方法。

1，使用rgba()函数

这种方法好适合使用多种颜色绘制，而且每个颜色需要单独设置不同的透明度的情况。
比如下面样例，底部的圆形使用实心颜色，上面的三角形使用半透明颜色填充，两种图形边框都使用实心颜色。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//设置填充及描边颜色
context.fillStyle = "rgb(100,150,185)";
context.lineWidth = 10;
context.strokeStyle = "red";
//绘制圆形
context.arc(110, 90, 80, 0, 2*Math.PI);
context.fill();
context.stroke();
 
//调用beginPath()绘制新形状
context.beginPath();
 
//用半透明的颜色填充三角形
context.fillStyle = "rgba(100,150,185,0.5)";
//绘制三角形
context.moveTo(215,50);
context.lineTo(25,190);
context.lineTo(315,190);
context.closePath();
context.fill();
context.stroke();

2，设置绘图上下文的globalAlpha属性

设置后，后续所有的绘图操作都会使用相同的透明度。
下面样例可以看到三角形的内部和边框都透明了。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//设置填充及描边颜色
context.fillStyle = "rgb(100,150,185)";
context.lineWidth = 10;
context.strokeStyle = "red";
//绘制圆形
context.arc(110, 90, 80, 0, 2*Math.PI);
context.fill();
context.stroke();
 
//调用beginPath()绘制新形状
context.beginPath();
 
//用半透明的三角形
context.globalAlpha = 0.5;
context.fillStyle = "rgba(100,150,185)";
//绘制三角形
context.moveTo(215,50);
context.lineTo(25,190);
context.lineTo(315,190);
context.closePath();
context.fill();
context.stroke();

使用 Fabric.js 你可以创建和填充画布上的对象，从简单的几何图形到成百上千路径组成的复杂图形。你可以通过鼠标轻松的移动、缩放和旋转这些对象，修改它们的属性（颜色、透明度，层叠顺序）等等

HTML5 Canvas绘图库介绍

Fabric.js是一个用于简化HTML5 Canvas标签操作的JS框架。 这是一个canvas元素上的互动对象模型。它还是一个SVG-to-canvas解析器。支持以下浏览器：
1.Firefox 2+
2.Safari 3+
3.Opera 9.64+
4.Chrome (all versions should work)
5.IE9+