title: Canvas Layers (Z Index)
body: <p>I understand that Canvas is as ink dries and each item that is draw is on top.</p>
  
  <p>I'm having a little problem, I have a list of sources of background images</p>
  
  <pre><code>                var sources = {
                    bg: 'images/room-1/bg.png',
                    rightWall: 'images/room-1/wall-right.png',
                    leftWall: 'images/room-1/wall-left.png',
                    beam: 'images/room-1/beam-left.png',
                    sofa: 'images/room-1/sofa.png'
                  };
  
                  loadImages(sources, function(images) {
                    context.drawImage(images.bg, 0, 0, 760, 500);
                    context.drawImage(images.rightWall, 714, 0, 46, 392);
                    context.drawImage(images.leftWall, 0, 160, 194,322);
                    context.drawImage(images.beam, 0, 45, 143,110);
                    context.drawImage(images.sofa, 194, 280, 436,140);
                  });
  </code></pre>
  
  <p>This is fine and they order how I like.</p>
  
  <p>My issue is I have an image upload for a user to upload their image into the Canvas.</p>
  
  <p>I am just using an upload box to test the theory, but the idea is the user will upload their image, crop, scale it, using JQuery / PHP and this saves the image. I will then grab this manipulated URL and pull this in, however the problem is that the Canvas is loaded so when i upload an image, it goes on top off the sources image.</p>
  
  <p>I do not want to use multiple Canvas as I need to save this canvas as an image as a whole.</p>
  
  <pre><code>            var imageLoader = document.getElementById('imageLoader');
                  imageLoader.addEventListener('change', handleImage, false);
  
                  function handleImage(e){
                      var reader = new FileReader();
                      reader.onload = function(event){
  
                          var img = new Image();
                          img.onload = function(){
                              canvas.width = 760;
                              canvas.height = 300;
                          }
                          img.src = event.target.result;
                          img.onload = function(){
                              context.drawImage(img, 0, 0);
                          };
                      }
                      reader.readAsDataURL(e.target.files[0]);     
                  }
  </code></pre>