title: Grid drawn using a <canvas> element looking stretched
body: <p>I'm trying to draw a grid on a <code>&lt;canvas&gt;</code> element with the ultimate goal of making a <a href="http://upload.wikimedia.org/wikipedia/commons/d/df/Go_game_example.png" rel="nofollow noreferrer">Go board</a>.</p>
  
  <p>For some reason the grid is looking stretched, with the lines being thicker than 1 pixel and the spacing being completely wrong. It doesn't even start in the <code>(10,10)</code> position..</p>
  
  <p>It would be great if someone could take a look at tell me what I'm doing wrong.</p>
  
  <h2><a href="http://jsfiddle.net/h2yJn/" rel="nofollow noreferrer">http://jsfiddle.net/h2yJn/</a></h2>
  
  <p><img src="https://i.stack.imgur.com/o3W6O.png" alt="alt text"></p>