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>

Answer 1

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.