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

Question

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:

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

If you have it working now, can you write down your answer and mark the answer as accepted, so that we know the issue has been resolved and how you got it to work? Thanks! And good job figuring it out! :) — projeqht

odd_duck odd_duck · Accepted Answer · 2013-07-11T14:32:26

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/

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

1 Answers