title: HTML5 canvas: image resizing
body: <p>I'm trying to place an image on a canvas without resizing it. I thought drawImage(img, x, y) would do the trick, but it stretches the image to fill the canvas.
  Also supplying drawImage(img, x, y, width, height) with the dimensions of my image doesn't seem to work.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;canvas id="story" style="position:relative; width:800px; height:600px;"&gt;&lt;/canvas&gt;
  
  &lt;script type="text/javascript"&gt;
  
  window.onload = function() {
    var canvas = document.getElementById("story");
    var context = canvas.getContext("2d");
    var img = document.getElementById("img1");
    var width = parseInt(img.width);
    var height = parseInt(img.height);
    context.drawImage(img, 0, 0, width, height);
  }
  
  &lt;/script&gt;
  &lt;img id="img1" alt="" src="http://link to image"/&gt;
  </code></pre>
  
  <p>Thanks in advance!</p>
  
  <p>PS: I added the parseInt's to make sure that drawImage gets valid values.</p>