Photoshop Question posted in
The official user guide can be found here.

Kineticjs clip shape by mask image – Photoshop

I have mask image like this

enter image description here

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

Tags:

2

Answers


  1. 0

    As of my knowledge you can try by using opacity: 0. for your image value. or create a rectangle overlap the rectangle over your image.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search