title: canvas.toDataURL() not working properly
body: <p>I am having a canvas in which I upload an image with the following code:</p>
  
  <pre><code>function handleImage(e){
      var reader = new FileReader();
      reader.onload = function(event){
          var img = new Image();
          img.onload = function(){
              canvas.width = img.width;
              canvas.height = img.height;
              ctx.drawImage(img,0,0);
          }
          img.src = event.target.result;
      }
      reader.readAsDataURL(e.target.files[0]);
  }
  </code></pre>
  
  <p>Now I wanted to use the <code>canvas.toDataURL()</code> to load the image to another canvas. The code is:</p>
  
  <pre><code>var dataURL = canvas.toDataURL();
  drawDataURIOnCanvas(dataURL,canvas2);
  
      function drawDataURIOnCanvas(dataURL, name_of_canvas) {
  
      var myCanvas = document.getElementById(name_of_canvas);
      var img3 = new Image;
      var ctx2 = myCanvas .getContext('2d');
      img3.onload = function(){
         ctx2.drawImage(img3,0,0); // Or at whatever offset you like
      };
      img3.src = dataURL;
  }
  </code></pre>
  
  <p>If I put to this a working url all fine. But the produced url from any picture I have tried comes out as </p>
  
  <blockquote>
    <p>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=. </p>
  </blockquote>
  
  <p>If you try to use that it would not produce the photo of a plane that was in the canvas. How can I use the function <code>toDataURL</code> to draw the image on another canvas? </p>