title: draw crisp lines on HTML5 canvas with browser zoom
body: <p>When setting the browser zoom to 150% and drawing a line on a canvas, the line is blurry.
  When I double the width and height of the canvas and downscale it to the original width and height with css, lines are crisp.</p>
  
  <p>The top triangle is blurry while the bottom triangle is crisp:
  <a href="http://jsbin.com/acimiq/1" rel="nofollow noreferrer">http://jsbin.com/acimiq/1</a></p>
  
  <p>Is it a browser bug, OS bug or am I missing something?</p>
  
  <p>Related</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas">Disable Interpolation when Scaling a &lt;canvas&gt;</a></li>
  <li><a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/" rel="nofollow noreferrer">http://www.html5rocks.com/en/tutorials/canvas/hidpi/</a></li>
  <li><a href="http://phoboslab.org/log/2012/09/drawing-pixels-is-hard" rel="nofollow noreferrer">http://phoboslab.org/log/2012/09/drawing-pixels-is-hard</a></li>
  <li><a href="http://elev.at/predawnblog/posts/2011/03/crisp-html-5-canvas-text-on-mobile-phones-and.html" rel="nofollow noreferrer">http://elev.at/predawnblog/posts/2011/03/crisp-html-5-canvas-text-on-mobile-phones-and.html</a></li>
  </ul>
  
  <p>I've tested on Chrome 27, FF 22 and IE 10 on Windows 7.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;canvas test&lt;/title&gt;
  &lt;style id="jsbin-css"&gt;
  #canvas1 {
      image-rendering: optimizeSpeed;             // Older versions of FF
      image-rendering: -moz-crisp-edges;          // FF 6.0+
      image-rendering: -webkit-optimize-contrast; // Webkit
                                                  //  (Safari now, Chrome soon)
      image-rendering: -o-crisp-edges;            // OS X &amp; Windows Opera (12.02+)
      image-rendering: optimize-contrast;         // Possible future browsers.
      -ms-interpolation-mode: nearest-neighbor;   // IE
  }
  
  #canvas2 {
    width: 300px;
    height: 150px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;canvas id="canvas1" width="300" height="150"&gt;&lt;/canvas&gt;
    &lt;br/&gt;
    &lt;canvas id="canvas2" width="600" height="300"&gt;&lt;/canvas&gt;
  &lt;script&gt;
      var canvas1 = document.getElementById('canvas1');
      var ctx1 = canvas1.getContext('2d');
      ctx1.imageSmoothingEnabled = false;
      ctx1.webkitImageSmoothingEnabled = false;
      ctx1.mozImageSmoothingEnabled = false;
      ctx1.beginPath();
      ctx1.moveTo(125,125);
      ctx1.lineTo(125,45);
      ctx1.lineTo(45,125);
      ctx1.closePath();
      ctx1.stroke();
  
      var canvas2 = document.getElementById('canvas2');
      var ctx2 = canvas2.getContext('2d');
      ctx2.scale(2, 2);
      ctx2.beginPath();
      ctx2.moveTo(125,125);
      ctx2.lineTo(125,45);
      ctx2.lineTo(45,125);
      ctx2.closePath();
      ctx2.stroke();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>