javascript - Canvas Layers (Z Index) -

I understand that the canvas ink is in the form of dry and every item that draw is at the top.

I have a little problem, I have a list of sources of background images

  var source = {bg: 'images / room-1 / bg.png' 'Right' image: 'Pictures / cell-1 / wall-right. Png', left valve: 'images / rooms -1 / wall-left page', beam: 'picture / cell-1 / beam-left page', sofa: 'Pictures / Rooms-1 /sofa.png'}; Load images (source, function (images) {context.drawImage (images.bg, 0, 0, 760, 500); context.drawImage (images.rightWall, 714, 0, 46, 392); references drawImage (images. LeftWall, 0, 160, 194, 322); context.drawImage (images.beam, 0, 45, 143,110); references. DrawImage (images.sofa, 194, 280, 436,140);});   
 That's fine and how they like me.  
 My problem is that I have to upload my image in the canvas to upload an image. > 
 I am using only one upload box to test the theory, but the idea is that the user will scale his image, crop it, use JQuery / PHP and will save this image . Then I will grab this sieve URL and drag it, but the problem is that the canvas is loaded, when I upload an image, it goes above the source image.  
 I do not want to use as much as I need to save this canvas as an image in full form, so many canvas.  
  var imageLoader = document.getElementById ('imageLoader'); ImageLoader.addEventListener ('change', handle image, incorrect); Function Handle Image (E) {var Reader = New FileReader (); Reader.loads = ceremony (event) {var img = new image (); Img.onload = function () {canvas.width = 760; Canvas Heights = 300; } Img.src = event.target.result; Img.onload = function () {context.drawImage (IMG, 0, 0); }; } Reader.readAsDataURL (e.target.files [0]); }    
 
 
 There are no layers in the canvas.  
 But you still get 1 final image with both your last background and your user's scale / rotated foreground  
 because you want the user to rotate / scale their image But you do not want to affect the background, you will need 2 canvas - a background canvas and user canvas.  
  // HTML & lt; Div id = "container" & gt; & Lt; Canvas ID = "background" class = "cook" width = 760 height = 300> gt; & Lt; / Canvas & gt; & Lt; Canvas id = "canvas" class = "cook" width = 760 height = 300 & gt; & Lt; / Canvas & gt; & Lt; / Div & gt; // CSS # container {status: relative; Border: 1px solid blue; Width: 760px; Height: 300px; } .subcanvs {status: complete; } // javascript // a background canvas bar background = document.getElementById ("background"); Var bkCtx = background.getContext ("2D"); // A foreground canvas which user can rotate / scale var canvas = document.getElementById ("canvas"); Var ctx = canvas.getContext ("2D");   
 Then when the user is rotated / scaling, then portray the user's canvas on the background canvas.  
  // End users canvas canvas BKCTXDrawasies with background (canvas, 0,0); // save the background canvas (now it has been added) as a image var imageURL = background.toDataURL ();