title: drawImage - Resize and keep scale
body: <p>I am trying to resize an image using drawImage but keep the scale.  I have this so far...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("scream");
      ctx.drawImage(img, 0, 0, 600, 428);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Image to use:&lt;/p&gt;
  &lt;img id="scream" width="400" height="300" src="http://lorempixel.com/1280/960/sports/" alt="The Scream"&gt;
  
  &lt;p&gt;Canvas:&lt;/p&gt;
  &lt;canvas id="myCanvas" width="428" height="600" style="border:2px solid black;"&gt;
  Your browser does not support the HTML5 canvas tag.
  &lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to make the image fill the container to lose the white space at the bottom, if I put the exact dimensions in then it becomes stretched.</p>
  
  <p>Does anyone have an example they can point me in the direction of?</p>