title: Scaling a canvas nicely with css
body: <p>I'm trying to draw an image on a canvas, then use css to fit the canvas within a certain size. It turns out that many browsers don't scale the canvas down very nicely. Firefox on OS X seems to be one of the worst, but I haven't tested very many. Here is a minimal example of the problem:</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;img&gt;
  &lt;canvas&gt;&lt;/canvas&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>img, canvas {
    width: 125px;
  }
  </code></pre>
  
  <h3>JS</h3>
  
  <pre><code>var image = document.getElementsByTagName('img')[0],
      canvas = document.getElementsByTagName('canvas')[0];
  
  image.onload = function() {
    canvas.width = image.width;
    canvas.height = image.height;
  
    var context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, canvas.width, canvas.height);
  }
  
  image.src = "http://upload.wikimedia.org/wikipedia/commons/thumb/0/00/Helvetica_Neue_typeface_weights.svg/783px-Helvetica_Neue_typeface_weights.svg.png"
  </code></pre>
  
  <p>Running in a codepen: <a href="http://codepen.io/ford/pen/GgMzJd" rel="nofollow noreferrer">http://codepen.io/ford/pen/GgMzJd</a> </p>
  
  <p>Here's the result in Firefox (screenshot from a retina display):</p>
  
  <p><img src="https://d3vv6lp55qjaqc.cloudfront.net/items/292G3D3r2I150G0m1M2a/canvas_scaling_firefox.png" alt="canvas_scaling_firefox.png"></p>
  
  <p>What's happening is that both the <code>&lt;img&gt;</code> and <code>&lt;canvas&gt;</code> start at the same size and are scaled down by the browser with css (the image width is 783px). Apparently, the browser does some nice smoothing/interpolation on the <code>&lt;img&gt;</code>, but not on the <code>&lt;canvas&gt;</code>.</p>
  
  <p>I've tried:</p>
  
  <ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering" rel="nofollow noreferrer"><code>image-rendering</code></a>, but the defaults seem to already be what I want.</li>
  <li>Hacky solutions like <a href="https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly">scaling the image down in steps</a>, but this didn't help: <a href="http://codepen.io/ford/pen/emGxrd" rel="nofollow noreferrer">http://codepen.io/ford/pen/emGxrd</a>. </li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.imageSmoothingEnabled" rel="nofollow noreferrer"><code>Context2D.imageSmoothingEnabled</code></a>, but once again, the defaults describe what I want.</li>
  </ul>
  
  <p>How can I make the image on the right look like the image on the left? Preferably in as little code as possible (I'd rather not implement bicubic interpolation myself, for example).</p>