title: How to avoid "antialiasing" effect in HTML5 Canvas
body: <p>Why does the following code changes line's width to 2 pixels instead of 1 eventually?</p>
  
  <pre><code>var canvas = document.getElementById('c');
  var context = canvas.getContext('2d');
  
  function clear() {
      context.clearRect(0, 0, canvas.width, canvas.height);
  }
  
  function draw() {
    context.save();
    context.beginPath();
    context.scale(zoom, zoom);
    context.moveTo(100, 50);
    context.lineTo(100, 100);
    context.restore();
    context.stroke();
  }
  
  var zoom = 1.0;
  
  $('#c').mousewheel(function(e) {
    if (e.originalEvent.deltaY &lt; 0) {
      zoom *= 1.1;
    } else {
      zoom /= 1.1;
    }
    clear();
    draw();
  });
  
  draw();
  </code></pre>
  
  <p>You can try it out here -- <a href="https://jsfiddle.net/818j0646/" rel="nofollow noreferrer">https://jsfiddle.net/818j0646/</a>.</p>
  
  <p>Just try to zoom in / out and you'll notice what I'm talking about:</p>
  
  <p><a href="https://i.stack.imgur.com/64VhK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/64VhK.png" alt="enter image description here"></a></p>
  
  <p>How can I avoid this behavior? I need my line to stay 1 width always, without such "antialiasing" effect.</p>