title: Why doesn't moveTo(0, 0); lineTo(X, X); draw a 45° line?
body: <p>I spent a lot of time today trying to do some simple canvas work (which I haven't played with in quite a while), but lines weren't drawing to the right places. It turns out that it was JavaScript and/or Canvas that was screwy, not my math. Given a 2D canvas context, the following:</p>
  
  <pre><code>context.moveTo(0, 0);
  context.lineTo(50, 50);
  context.stroke();
  </code></pre>
  
  <p>…draws a line that seems to be at 30° or so, not 45° as expected. <a href="http://jsfiddle.net/t6HaC/" rel="nofollow">Here's a jsFiddle</a>.</p>
  
  <p>The only way that this makes sense is if the canvas/context is using non-square pixels… Is that really the case? Whose bright idea might that be? Is there a way to force the canvas to use square pixels instead to make my math easier?</p>