Javascript 帆布图像的羽毛板

我有一个加载了以下图像的画布：

背景图像：

正面图像：

两者一起看起来像下图：

现在我想将羽毛效果应用到手板上，以产生如下效果：

到目前为止，我尝试了以下解决方案。但结果与上图不同

var temp=document.createElement（'canvas'），
tx=临时getContext（'2d'）；
temp.width=scope.canvas.width；
temp.height=scope.canvas.height；
tx.translate（-温度宽度，0）；
tx.shadowOffsetX=温度宽度；
tx.shadowOffsetY=0；
tx.shadowColor='#000'；
tx.shadowBlur=100；
var img=新图像（）；
img.onload=函数（）{
tx.drawImage（img，0，0，512，512）；
};
img.src=imageURL；//手的形象
var temp2=document.createElement（'canvas'），
tx2=temp2.getContext（'2d'）；
temp2.width=scope.canvas.width；
temp2.height=scope.canvas.height；
var img2=新图像（）；
img2.onload=函数（）{
tx2.drawImage（img2，0，0，512，512）；
tx2.save（）；
tx2.globalCompositeOperation='destination out'；
tx2.drawImage（温度，0,0）；
tx2.restore（）；
};
img2.src=temp.toDataURL（“图像/png”）要使图像羽化，请通过新画布创建图像的副本，并使用目标输出组件创建图像的反转掩码。然后再画一次手，然后用一个阴影遮罩以创建羽毛


var canvas=document.createElement（“canvas”）；
canvas.width=1024，canvas.height=1024；
var ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
var hand=新图像（）；
hand.src=”http://i.stack.imgur.com/PbAfc.png";
hand.onload=函数（）{
var can=document.createElement（“画布”）；
can.width=this.width；
can.height=this.height；
ct=can.getContext（“2d”）；
//创建反转遮罩
ct.fillStyle=“黑色”；
ct.fillRect（0,0，这个宽度，这个高度）；
ct.globalCompositeOperation=“目的地输出”；
ct.drawImage（这个，0,0）；
//创建第二个画布
var can1=document.createElement（“画布”）；
can1.width=此.width；
can1.height=此高度；
ct1=can1.getContext（“2d”）；
//画图
ct1.drawImage（该值为0,0）；
ct1.shadowColor=“黑色”；
ct1.shadowBlur=30；//羽毛的数量
ct1.globalCompositeOperation=“目的地输出”；
ct1.drawImage（can，0,0）；
ct1.shadowBlur=20；//羽毛的数量
ct1.drawImage（can，0,0）；//你画得越多，效果就越大
ct1.shadowBlur=10；//羽毛的数量
ct1.drawImage（can，0,0）；//你画得越多，效果就越大
ct1.globalCompositeOperation=“源代码结束”；
ct.globalCompositeOperation=“源代码结束”；
ctx.drawImage（can1,0,0）；
//在后面的代码中，使用新的canvas can1作为手部图像。
}
//ctx.fillStyle=“#e19e9e”
ctx.fillRect（0,010241024）