Javascript 使用kineticjs填充图像的png非透明部分

我正在尝试使用kineticjs用红色填充png图像。 但当我尝试应用填充：“红色”时，它会填充图像的透明部分。 我想填充图像的不透明部分

这是：

 [demo]:http://jsfiddle.net/9wwL2z5L/1/

这里有一种使用内存中html5画布元素的方法。

• 创建画布元素并将其大小调整为图像大小

• 将图像绘制到画布上

• 将合成设置为“源输入”。这将导致任何新图形仅显示在当前不透明像素上

• 画一个覆盖整个画布的红色矩形。只有cat内部的像素将为红色

• 将动能图像的图像源设置为内存画布

下面是示例代码和演示：

var阶段=新的动力学阶段({
容器：'容器'，
宽度：578，
身高：500
});
var layer=新的动能层（）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
canvas.width=imageObj.width；
canvas.height=imageObj.height；
ctx.drawImage（imageObj，0,0）；
ctx.globalCompositeOperation='source-in'；
ctx.fillStyle='red'；
ctx.fillRect（0,0，canvas.width，canvas.height）；
var cat=新的动力学图像({
图片：画布
});
//将形状添加到层中
添加图层（cat）；
//将层添加到舞台
阶段。添加（层）；
};
imageObj.src=http://xiontechnologies.in/images/cat_1.png';
你应该在帖子中包含一些来自小提琴的代码；链接经常会失效。