Save many canvas element as image

Question

I have 3 layers of canvas - 1 is matrix, 2 & 3 is graphics, how to preserve them in one image?

<div style="position: relative;">
 <canvas id="matix" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Do you want them combined into 1 image on layered on top of each other or side by side? — Castrohenge, Sep 20 '10 at 13:05
How did you implemented layers? Are they separated canvas elements? First layer is matrix of what (do you mean pixel data?)? Is it something like this? http://stackoverflow.com/questions/3008635/html5-canvas-element-multiple-layers — pepkin88, Sep 20 '10 at 14:20

score 23 · Accepted Answer · answered Sep 26 '10 at 13:31

You can draw one canvas into another with ctx.drawImage(other_canvas,0,0)

If you do that in the right order, you will have all the canvas contents correctly layered in one of them.

If you want to save the image, you can call canvas.toDataURL() to get the contents as a base64 encoded PNG file.

Save many canvas element as image

1 Answers1

Linked