CODEWITHSUNDEEP
javascripthtmlcanvas
ErgallM
ErgallM

Reputation: 237

Save many canvas element as image

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>

Upvotes: 16

Views: 9960

Answers (1)

andrewmu
andrewmu

Reputation: 14534

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.

Upvotes: 23

Related Questions