Search code examples
javascripthtmlkineticjsclip

Kineticjs Complex Image Clipping

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?

Solution

  • 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/