title: How can I draw a diagonal line in <canvas> that looks the same in Safari/Chrome/Firefox?
body: <p>In browsers that support HTML5, this code draws a diagonal line:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;body&gt;&lt;script&gt;
  var canvas = document.createElement('canvas');
  canvas.width = 100;
  canvas.height = 100;
  var ctx = canvas.getContext('2d');
  ctx.strokeStyle = 'black';
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(100, 100);
  ctx.lineWidth = 1;
  ctx.stroke();
  document.body.appendChild(canvas);
  &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>However, the rendering looks drastically different in Safari:</p>
  
  <p><a href="https://i.stack.imgur.com/kc2hE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kc2hE.png" alt="Comparison of diagonal line in Chrome, Firefox, Safari"></a></p>
  
  <p>(Chrome 49.0, Firefox 45.0, Safari 9.0 from left to right.)</p>
  
  <p>I.e., in Safari, the line looks about twice as thick as the others.</p>
  
  <p>Can I do anything to make the line look identical in all three browsers?</p>