title: Why HTML 5 Canvas Does Not Draw Image Content?
body: <p>I'm trying to generate an image from a HTML 5 Canvas, but it's not "rendering" image content from the canvas.</p>
  
  <p>Here is the code: <a href="http://jsfiddle.net/9kQPk/" rel="nofollow">http://jsfiddle.net/9kQPk/</a></p>
  
  <p>It's supposed to be simple, I create a canvas, set a few things and a image using "drawImage" function, but when I try to generate an img html component, the image from canvas does not appear... Here is the JS:</p>
  
  <pre><code>$('#drawing').css("visibility", "visible");         
  var drawing = document.getElementById("drawing");
  var con = drawing.getContext("2d");         
  drawing.setAttribute("width", 500);
  drawing.setAttribute("height", 200);
  con.fillStyle = "#FF0000";
  con.fillRect(0, 0, 500, 200);                                           
  var img = new Image();
  img.src = "http://www.deque.com/wbcntnt928/wp-content/dquploads/jquery_logo.png";
  img.onload = function() {                
      con.drawImage(img, 0, 0, 250, 250);
  };
  
  //Generate Image
  var drawing = document.getElementById("drawing");
  var dataURL = drawing.toDataURL();
  document.getElementById("result").src = dataURL;
  </code></pre>
  
  <p>Thanks!</p>