Kineticjs clip shape by mask image

Question

I have mask image like this

How can I hide drawn elements by this mask like in photoshop (dark areas are invisible, transparent areas are shown).

It is possible to do this in raw canvas via setting globalCompositeOperation = 'destination-over', but I want it in Kineticjs

Answer 1

You can do something like this:

var shape = new Kinetic.Shape({
  drawFunc: function(context) {
    context.beginPath();
    context.rect(0, 0, image.width, image.height)
    context.closePath();
    context.fillStrokeShape(this);

     context.setAttr('globalCompositeOperation', 'destination-out');
     context.drawImage(image, 0, 0);
      context.setAttr('globalCompositeOperation', 'source-over');        
  },
  fill: '#00D2FF',
});

Demo: http://jsbin.com/nebuvi/1/edit?html,js,output