0

I tried to emulate this other's Stackoverflow canvas clipping function in KineticJS with additional feature of draggable image, but I can't get it done.

Fiddle: http://jsfiddle.net/dekaa/6L1wxt1g/

shape = new Kinetic.Shape({
    sceneFunc:function(ctx){
        ctx.drawImage(clipping_mask,0,0);
        ctx.globalCompositeOperation = "source-in";
        ctx.drawImage(main_image,0,0);
    },
    draggable:true
});

Tried to use sceneFunc function, when I use it the draggable feature is not working. So the question is can it be done in KineticJS?

Community
  • 1
  • 1
deka
  • 377
  • 1
  • 2
  • 14

1 Answers1

1

ctx argument is not native context.

    ctx.drawImage(clipping_mask,0,0);
    ctx.setAttr('globalCompositeOperation',"source-in");
    ctx.drawImage(main_image,0,0);

http://jsfiddle.net/6L1wxt1g/1/

lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Ah, Thanks a lot, I forgot about this. The globalCompositeOperation works now, but the draggable still not working. – deka Oct 01 '14 at 12:47
  • Thank you very much for the answer. It's pretty much make sense now. – deka Oct 01 '14 at 15:39