title: What algorithm do browsers commonly use when scaling images with CSS?
body: <p>I am trying to get <code>canvas</code> to render scaled images with the same visual fidelity as CSS does.</p>
  
  <p>According to my tests (done in Chrome Version 43.0.2357.130), it does not seem to be Lanczos3, even though my tests with <a href="http://entropymine.com/resamplescope/notes/browsers/" rel="noreferrer">ResampleScope</a> indicate that it should be. </p>
  
  <p>See Here:
  <img src="https://i.stack.imgur.com/kKHTD.png" alt="enter image description here"></p>
  
  <p>Code used to produce these results:</p>
  
  <p>"CSS":</p>
  
  <pre><code>&lt;img src="temp.png" style="width:200px;height:200px"&gt;
  </code></pre>
  
  <p>"canvas drawImage":</p>
  
  <pre><code>ctxNative.drawImage(img, 0, 0, 200, 200);
  </code></pre>
  
  <p>"canvas transform":</p>
  
  <pre><code>ctxTransform.transform(200 / img.width, 0, 0, 200 / img.height, 0, 0);
  ctxTransform.drawImage(img, 0, 0, img.width, img.height);
  </code></pre>
  
  <p><a href="http://strauss.pas.nu/js-bilinear-interpolation.html" rel="noreferrer">"bicubic"</a> (code for bicubic at the bottom)</p>
  
  <p><a href="https://github.com/ascorbic/clevrlib/blob/069cbebad6b107e0c0318043a6f0cf5c0c1d7bad/com/clevr/graphics/InterpolatedBitmapData.as" rel="noreferrer">"bicubic #2"</a></p>
  
  <p><a href="https://stackoverflow.com/a/19144434">"downsample alg."</a></p>
  
  <p><a href="https://stackoverflow.com/a/3223466">"lanczos3"</a></p>