title: merging multiple <canvas> issue
body: <p>I'm designing a simple app for which I need to use multiple <strong>globalCompositeOperation</strong>, and therefore I need to use multiple hidden  items, then merge them to get the final result.</p>
  
  <p>one of the canvas items is used to <strong>drawImage()</strong> and then use it as an alpha mask.</p>
  
  <p>I assumed that on 2nd canvas if I use to draw 1st canvas, it will copy it exactly so I can add 2nd thing on top of it. It does copy only the <strong>fillRect()</strong> and ignores the <strong>drawImage()</strong> function... </p>
  
  <p>Any idea how can I forward entire content of the first canvas to 2nd? I need the masked part to move to the 2nd canvas.</p>
  
  <p>Been stuck on it for hours and need your help. Tried to use <strong>toDataUrl("image/png")</strong> and then output that into 2nd canvas, but getting same results :(</p>
  
  <p>simplified version under:
  <a href="http://jsfiddle.net/EbVmm/17/" rel="nofollow">http://jsfiddle.net/EbVmm/17/</a> </p>
  
  <p>Thanks</p>
  
  <pre><code>var c1 = document.getElementById("canvas1");
  var c2 = document.getElementById("canvas2");
  
  function drawScene(mainColour) {
  
      var ctx = c1.getContext("2d");
  
      var alphaPath = "http://eskarian.com/images/alpha-test.png";
      var alphaObj = new Image();
      alphaObj.src = alphaPath;
  
      ctx.fillStyle = mainColour;
      ctx.fillRect(0, 0, 200, 300);
      ctx.globalCompositeOperation = 'xor';
      alphaObj.onload = function () {
          ctx.drawImage(alphaObj, 0, 0);
      };
  };
  
  function addScene(colour) {
      var ctx2 = c2.getContext("2d");
  
      ctx2.drawImage(c1, 0, 0);
      ctx2.globalCompositeOperation = "source-over";
      ctx2.fillStyle = colour;
      ctx2.fillRect(50, 50, 100, 100);
  
  };
  </code></pre>