drawing images on 3 layer canvas and saving

Question

I have a 3 layers of canvas, which I have given a separate id to each.

This is what I am doing.

HTML

Answer 1

To draw on all three “layers” you must create contexts for all layers

// references to layer1
var canvas1 = document.getElementById('layer1');
var context1 = canvas1.getContext('2d');

// references to layer2
var canvas2 = document.getElementById('layer2');
var context2 = canvas2.getContext('2d');

// references to layer3
var canvas3 = document.getElementById('layer3');
var context3 = canvas3.getContext('2d');

Then after you’re done drawing on all layers, merge them (here merged onto layer1):

// merge all layers onto layer1
context1.drawImage(canvas2,0,0);
context1.drawImage(canvas3,0,0);

And finally save the merged canvas to an image and set your img src to that image.

// save the merged drawings as an image
// and set the img element src to that merged image
var img=new Image();
img.onload=function(){
    document.getElementById("results").src=img.src;
}
img.src=canvas1.toDataURL();

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/fhjwY/

 









    
Draw rects on 3 canvases
    
Merge all drawings to 1st canvas
    
Create an image from merged drawings
    
Set the image element with that merged image