How can I save div as image at client side where div contains one or more than one HTML5 canvas elements?

Question

Div 'canvasesdiv' element contains three HTML5 canvases.

<div style="position: relative; width: 400px; height: 300px;" id="canvasesdiv">
    <canvas width="400" height="300px" style="z-index: 1; position: absolute; left: 0px; top: 0px;" id="layer1" />
    <canvas width="400" height="300px" style="z-index: 2; position: absolute; left: 0px; top: 0px;" id="layer2"/>
    <canvas width="400" height="300px" style="z-index: 3; position: absolute; left: 0px; top: 0px;" id="layer3"/>
</div>

How can I save an image combining all canvases present inside the div 'canvasesdiv' at client side using JavaScript?

Answer 1

This is very similar to a previous question that I answered: save-many-canvas-element-as-image

In summary: draw all of the canvases to one of them and then get the image via toDataURL()

Answer 2

I think you have to use Ajax query for some serverside operations. A canvas can be exported in png using Apache Batik with exec('java -jar...')

The rest is algorithmic.