Javascript 在HTML5画布元素中作为不透明度的渐变贴图？

有没有办法在画布元素上创建不透明度贴图 我正在尝试淡化生成的图像，如下所示

例如：

---

我不认为有任何方法可以直接使用渐变遮罩绘制图像，但您可以将图像预绘制到单独的画布上，然后使用绘制线性渐变遮罩，然后使用

drawImage

将该画布绘制到主画布上

工作示例：

var-cvs=document.getElementById（'cvs'）；
var ctx=cvs.getContext（'2d'）；
//画一些背景色。
ctx.fillStyle=“#FF6666”；
ctx.fillRect（0,0,150,200）；
ctx.fillStyle=“#6666FF”；
ctx.fillRect（150,0,150,200）；
//加载图像。
img=新图像（）；
img.onload=函数（）{
//在内存中创建画布并将图像绘制到其中。
var icvs=document.createElement（'canvas'）；
icvs.width=img.width；
icvs.高度=img.高度；
var ictx=icvs.getContext（'2d'）；
ictx.drawImage（img，0,0）；
//用于掩蔽。
ictx.globalCompositeOperation='destination out'；
//绘制遮罩渐变。
var梯度=ictx.createLinearGradient（0,0,0，icvs.高度）；
渐变。添加颜色停止（0，“透明”）；
渐变。添加颜色停止（1，“白色”）；
ictx.fillStyle=渐变；
ictx.fillRect（0，0，icvs.width，icvs.height）；
//将单独的画布绘制到主画布。
ctx.drawImage（icvs，25、25、250、150）；
};
img.src='//i.stack.imgur.com/dR8i9.jpg'