If I have 2 canvases:

The first canvas (canvas1) is the basic one that contains text and will be saved as an image (canvas1 + canvas2).

The second one (canvas2) contains an image that can be moved within canvas2 through keydown. The code works fine with canvas2 as I cleared first canvas2 then context2.drawImage(img,x,y).

But If i write( canvas1.drawImage(canvas2, 0, 0) then the movements of the image is shown in canvas 1. And if i said clear canvas 1 then canvas1.drawImage(canvas2, 0, 0) the text will disappear.

So my question is: how can I draw canvas 2 on canvas 1 when the user finishes moving the image not during the image's movement?

If I have 2 canvases:

The first canvas (canvas1) is the basic one that contains text and will be saved as an image (canvas1 + canvas2).

The second one (canvas2) contains an image that can be moved within canvas2 through keydown. The code works fine with canvas2 as I cleared first canvas2 then context2.drawImage(img,x,y).

But If i write( canvas1.drawImage(canvas2, 0, 0) then the movements of the image is shown in canvas 1. And if i said clear canvas 1 then canvas1.drawImage(canvas2, 0, 0) the text will disappear.

So my question is: how can I draw canvas 2 on canvas 1 when the user finishes moving the image not during the image's movement?

• javascript
• html
• canvas

2 Answers 2

I'm not entirely clear why you would want to do this, but if you want Canvas 1 to always display canvas 1+2, then you can always save the contents of Canvas 1:

1. Draw Canvas 1 to an in-memory canvas (call it canvas3)
2. Draw Canvas 2 to Canvas 1
3. Draw Canvas 3 (which was Canvas 1 saved) back to Canvas 1

http://jsfiddle/Jvgxb/14/

Try to make two DIVs over each other. each of those DIVs should contain one of your canvases :)