Search code examples
javascriptimagekineticjsmasking

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

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

Solution

  • 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