How to combine 2 canvas to one

You can combine 2 canvas elements onto 1 or the third canvas element by using drawImage().

About the drawImage method :

• This method is used when you want to use images on the canvas.
• The drawImage method can also draw parts of an image, and/or increase/reduce the image size and can take up to nine parameters, depending on what you want to do with the image.
• The image object can be an image, a video, or another canvas element.

This is an Example of using drawImage() with 2 canvas Element

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');

var can2 = document.getElementById('canvas2');
var ctx2 = can2.getContext('2d');

ctx2.drawImage(can, 0, 0);

Maximum z-index value

Maximum value of z-index in css: depends on each browser. The latest version of every browser use the same value which is 2147483647 that come from sign 32-bit values (−2147483648 to +2147483647)

Browser             Max z-index value  When exceeded, value changes to:
Internet Explorer 6 2147483647  2147483647
Internet Explorer 7 2147483647  2147483647
Internet Explorer 8 2147483647  2147483647
Firefox 2           2147483647  *element disappears*
Firefox 3           2147483647  0
Safari 3            16777271    16777271
Safari 4            2147483647  2147483647
Opera 9             2147483647  2147483647