title: Drawing Image onto Canvas Stretches Image?
body: <p>I have this code (stolen from the web):</p>
  
  <pre><code>function readIt() {
    var reader = new FileReader();
      reader.onload = (function(e) {
        var img = new Image();
        img.src = e.target.result;
        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");
        ctx.drawImage(img, 0, 0);
      }
    );
    reader.readAsDataURL(document.getElementById('userImage').files[0]);
  }
  </code></pre>
  
  <p>Which works up to a point. The canvas's width and height are set to the size of the image, but only the top left of the image appears - It appears to be stretched so it fits all the space allocated to the canvas (enough to display the whole image - 615px x 615px).</p>
  
  <p>If I add an &lt;img&gt; element sized the same size as the canvas and point the src to the image in the file system it appears perfect.</p>
  
  <p>I'm using Chrome, but it appears the same in Firefox.</p>
  
  <p>Thanks in advance. </p>