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>

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.