title: HTML Canvas not displaying image
body: <p>Im sure this has got to be something simple that I am overlooking, but I can't seem to get my canvas to display an jpg stored on the server.</p>
  
  <pre><code>&lt;img id="test_img" alt="test" src="/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg"/&gt;
  &lt;canvas id="user_photo" style="position:relative;"&gt;&lt;/canvas&gt;
  &lt;script type="text/javascript"&gt; 
      var image = new Image();
      image.src = "/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg";
      var pic = document.getElementById("user_photo");
      pic.getContext('2d').drawImage(image, 0, 0);
  &lt;/script&gt;
  </code></pre>
  
  <p>the <code>&lt;img&gt;</code> displays as expected, however the canvas is blank, though it does seem to have the correct dimensions. Any one see what I'm doing wrong?</p>
  
  <p>My tired eyes will appreciate any help.</p>
  
  <p>Thanks</p>