How I can mask PNG image with another PNG image with KineticJS?

Question

So, I have a picture, and I need to overlay it with another picture by PNG mask (black/transparent image). How I can to do this with KineticJS?

sorry for my bad english

Answer 1

Create custom Kinetic.Shape:

var image = new Kinetic.Shape({
    draggable: true,
    x : 100,
    y : 100,
    sceneFunc : function(ctx) {
      ctx.drawImage(mask, 0, 0);
      ctx.setAttr('globalCompositeOperation', 'source-in');
      ctx.drawImage(img, 0, 0);
    },
    hitFunc : function(ctx) {
      ctx.rect(0,0,img.width, img.height);
      ctx.fillStrokeShape(this);
    }
  });

http://jsbin.com/bagix/1/edit