title: drawing images on 3 layer canvas and saving
body: <p>I have a 3 layers of canvas, which I have given a separate id to each.</p>
  
  <p>This is what I am doing.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div style="position:relative;"&gt;
      &lt;canvas id="layer1" style="position: absolute; left: 0; top: 0; z-index: 0;"&gt;
      &lt;/canvas&gt;
      &lt;canvas id="layer2" style="position: absolute; left: 0; top: 0; z-index: 1;"&gt;
      &lt;/canvas&gt;
      &lt;canvas id="layer3" style="position: absolute; left: 0; top: 0; z-index: 1;"&gt;
      &lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can draw images on layer1</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var canvas = document.getElementById('layer1');
  var context = canvas.getContext('2d');
  context.canvas.width  = window.innerWidth;
  context.canvas.height = window.innerHeight*0.7;
  var imageObj = new Image();
  var imageObj1 = new Image();
  
  imageObj.onload = function() {
      context.drawImage(imageObj, 0, 0,context.canvas.width,context.canvas.height*0.9);
      context.drawImage(imageObj1, x1, y1,6,canvasHeight);    
  };
  
  imageObj1.src='vertical.png';
  imageObj.src = 'horizontal.png';
  </code></pre>
  
  <p>How will I draw images on all the layers and create single canvas.toDataUrl ?</p>