title: toDataURL() not returning valid image unless alert first
body: <p>I am uploading images from an HTML form and using Image() to resize an image on a canvas. </p>
  
  <p>Here is what I have:</p>
  
  <pre><code>var MAX_HEIGHT = 10;
  var target = document.getElementById("filesInfo");
  var preview = document.getElementById("preview");
  var canvas = document.getElementById("canvas");
  
  var render = function(src)
  {
      var img = new Image();
  
      img.onload = function()
      {
          if(img.height &gt; MAX_HEIGHT) 
          {
              img.width *= MAX_HEIGHT / img.height;
              img.height = MAX_HEIGHT;
          }
  
          var ctx = canvas.getContext("2d");
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          preview.style.width = img.width + "px";
          preview.style.height = img.height + "px";
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0, img.width, img.height);
      };
      img.src = src;
  };
  
  function fileSelect(evt) 
  {
      var files = evt.target.files;
      var result = '';
      var file;
  
      for (var i = 0; file = files[i]; i++) 
      {
          if (!file.type.match('image.*')) 
              continue;
          reader = new FileReader();
          reader.onload = function(e)
          {
              render(e.target.result);
          };
          reader.readAsDataURL(file);
          alert('foo');
          result += '&lt;li&gt;' + file.name + ' ' + file.size 
          + ' bytes &lt;img src="'+document.getElementById("canvas").toDataURL()+'"&gt;&lt;/li&gt;';
  
      }
      document.getElementById('filesInfo').innerHTML = '&lt;ul&gt;' + result + '&lt;/ul&gt;';
  }
  </code></pre>
  
  <p>If I remove alert('foo'), then image data does not come in (it is a blank image).  Only when I insert the alert does it actually work.  What am I missing here?</p>