title: Canvas toDataURL() returns blank image
body: <p>I'm using <a href="http://evanw.github.io/glfx.js/">glfx.js</a> to edit my image but when I'm trying to get that image's data using the <code>toDataURL()</code> function I get a blank image (width the same size as the original image).</p>
  
  <p>The strange thing is that in Chrome the script works perfect.</p>
  
  <p>What I want to mention is that the image is loaded in <code>canvas</code> using the onload event:</p>
  
  <pre><code>           img.onload = function(){
  
                  try {
                      canvas = fx.canvas();
                  } catch (e) {
                      alert(e);
                      return;
                  }
  
                  // convert the image to a texture
                  texture = canvas.texture(img);
  
                  // draw and update canvas
                  canvas.draw(texture).update();
  
                  // replace the image with the canvas
                  img.parentNode.insertBefore(canvas, img);
                  img.parentNode.removeChild(img);
  
              }
  </code></pre>
  
  <p>Also my image's path is on the same domain;</p>
  
  <p>The problem (in Firefox) is when i hit the save button. Chrome returns the expected result but Firefox return this:</p>
  
  <pre><code>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA7YAAAIWCAYAAABjkRHCAAAHxklEQVR4nO3BMQEAAADCoPVPbQZ/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
  ... [ lots of A s ] ... 
  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAzwD6aAABkwvPRgAAAABJRU5ErkJggg==
  </code></pre>
  
  <p>What could cause this result and how can I fix it?</p>