title: how to copy from one canvas to other canvas
body: <p>here is the <a href="http://jsfiddle.net/tahmid/UjrJM/2/" rel="nofollow">jsfiddle</a></p>
  
  <p>i have this as my source canvas </p>
  
  <p>HTML</p>
  
  <pre><code> &lt;h1&gt;Source Canvas&lt;/h1&gt;
   &lt;canvas id="source" width=436 height=567&gt;&lt;/canvas&gt;
   &lt;h1&gt;Destination Canvas&lt;/h1&gt;
   &lt;canvas id="destination" width=436 height=567&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code> var sourceImage, ctx, sourceCanvas, destinationCanvas;
          //get the canvases
          sourceCanvas = document.getElementById('source');
          destinationCanvas = document.getElementById('destination');
  
      //draw the source image to the source canvas
      ctx = sourceCanvas.getContext('2d');
  
       function start() {
  
                  ctx.drawImage(img1, 0, 0);
  
                  ctx.globalCompositeOperation = "source-atop";
  
                  var pattern = ctx.createPattern(img, 'repeat');
                  ctx.rect(0, 0, sourceCanvas.width, sourceCanvas.height);
                  ctx.fillStyle = pattern;
                  ctx.fill();
  
                  ctx.globalAlpha = .10;
                  ctx.drawImage(img1, 0, 0);
                  ctx.drawImage(img1, 0, 0);
                  ctx.drawImage(img1, 0, 0);
                   //ctx.globalAlpha = 1;
              }
       var img1 = new Image();
       var img = new Image();
      img.onload = function () {
  
                img1.onload = function () {
                    start();
                }
  img1.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4jiSz1.png";
  }
  img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png";
  </code></pre>
  
  <p>i want to to show what is in source canvas in my destination canvas. </p>
  
  <p>i tired </p>
  
  <pre><code>var image, destinationCtx;
  
  //create the image
  image = new Image();
  
  //get the base64 data
  image.src = sourceCanvas.toDataURL('image/png');
  
  //get the destination context
  destinationCtx = destinationCanvas.getContext('2d');
  
  //copy the data
  destinationCtx.drawImage(image, 0, 0);
  
  //done
  </code></pre>
  
  <p>but having no luck. am i missing something?
  Copy via imageData,Copy via Base64 data,Copy via direct draw any method will do my job.
  when i try with </p>
  
  <p><a href="http://jsperf.com/copying-a-canvas-element" rel="nofollow">http://jsperf.com/copying-a-canvas-element</a>
  it copies but when i put my source canvas writer it does not work ? am i missing something?</p>