title: Imitate background-size:cover in canvas element
body: <p>I have a canvas element that is a set size. I would like to set a background image in the canvas that takes up the entire height and width of the canvas, but the image maintains it's aspect ratio. There will obviously be some clipping or parts of the image that aren't viewable since the aspect ratio of the image and the canvas are different. This is simple when I'm dealing with a div - I can just set background-size:cover. </p>
  
  <p>How can I achieve the same effect with a canvas element, presumably using context.drawImage.</p>
  
  <p><code>
   context.drawImage(image, 0, 0);
  </code></p>
  
  <p>Here is a fiddle that shows what I want to happen as well as what's happening when I'm attempting to do this with css: <a href="http://jsfiddle.net/66Xfd/1/" rel="nofollow">http://jsfiddle.net/66Xfd/1/</a></p>
  
  <p>Info on background-size:cover if required - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/background-size</a></p>