Search code examples
htmlhtml5-canvaskineticjs

kineticjs - drag image even when it is underneath another (background)

Using HTML5 and kineticjs how can i drag a background image even when it is underneath another image or a foreground?

I have setup my own fiddle showing my setup of 2 images here:

http://jsfiddle.net/SkVJu/16/

The dragging works i just need to be able to drag the darth vader image (background) even when it lies underneath the yoda image (foreground)

I've come across this post on here and example:

Drag while in background in KineticJs

which does exactly what i want just with shapes rather than images using the globalCompositeOperation to draw the background underneath.

My attempt just draws the background above still (see fiddle for full code)

layer.getContext().globalCompositeOperation = "destination-over";
layer.add(background);
stage.add(layer);

http://jsfiddle.net/SkVJu/21/

Can anyone help?

UPDATE

I now realised what the problem was:

I was creating a new layer each time i added the image therefore the globalCompositeOperation was pointless. I have since moved the new layer out of the image onload function and it now works as expected

Solution

  • Managed to solve moving the layer outside of each image function and adding it to the stage there, followed by layer.draw(); after each image.onload

    Working fiddle here:

    http://jsfiddle.net/SkVJu/22/