title: HTML5 Canvas toDataURL returns blank
body: <p>I wanted to upload the image files, draw them into canvas, make changes and save it in the database. I tried to test the base64 value that the canvas image (<code>Pic</code>) returned, and it is blank. However, I see the result when I append the canvas (<code>Pic</code>) to the document. What am I doing wrong here?</p>
  
  <pre><code>function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object                
    for (var i = 0, f; f = files[i]; i++) {
  
      if (!f.type.match('image.*')) {
        continue;
      }
      // read contents of files asynchronously
      var reader = new FileReader();
  
      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
  
          var canvas = document.createElement("canvas");
  
          var datauri = event.target.result,
            ctx = canvas.getContext("2d"),
            img = new Image();
  
          img.onload = function() {
  
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0, width, height);
          };
          img.src = datauri;
          var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  
          document.body.appendChild(canvas); //picture gets uploaded                    
  
          // Generate the image data
  
          var Pic = canvas.toDataURL("image/png");
  
          console.log(Pic); // =&gt; returns base64 value which when tested equivalent to blank                              
          Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
  
          // Sending image to Server
          $.ajax({
            // …
          });
  
        };
      })(f);
      reader.readAsDataURL(f);
    }
  }
  </code></pre>