javascript - merging two canvases - Stack Overflow

admin管理员组

文章数量:1406177

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

Share Improve this question Follow edited Jul 13, 2011 at 20:58 pimvdb 155k8080 gold badges311311 silver badges356356 bronze badges asked Jul 13, 2011 at 20:45 AmalAmal 8133 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 :)

本文标签： javascriptmerging two canvasesStack Overflow