title: HTML5 Canvas — Line too thick
body: <p>These past two days I've been playing around with the HTML5 canvas element.  I'm attempting to draw a maze, but I'm at a stand-still.  The line I drew isn't consistent with the <code>lineWidth</code> property.  It's ~2px thicker.</p>
  
  <p>I'm familiar with the half pixel problem with the canvas element, and you need to start at <code>0.5</code>, but I don't know where I need to put the <code>0.5</code> in my code.</p>
  
  <p>If I'm not mistaken, if you want to make the vertical line consistent, the x argument needs to be .5 and for horizontal line, y value needs to be .5?</p>
  
  <p><a href="https://i.stack.imgur.com/PMfBj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PMfBj.png" alt="enter image description here"></a></p>
  
  <pre><code>    var canvas = document.getElementById("c"),
      c = canvas.getContext("2d"),
      w = canvas.width,
      h = canvas.height,
      hallwayWidth = w * 0.10; /*18px*/
  
  c.beginPath();
  c.lineWidth = 4;
  c.moveTo(0, 0);
  c.lineTo(w / 3, 0);
  c.moveTo(0, 0);
  c.lineTo(0, h);
  c.moveTo(w, 0);
  c.lineTo(w, h);
  c.moveTo(w / 3 + hallwayWidth, 0);
  c.lineTo(w, 0);
  c.moveTo(0, h);
  c.lineTo(w / 2, h);
  c.moveTo(w / 2 + hallwayWidth, h);
  c.lineTo(w, h);
  
  /*code for thick line*/
  c.moveTo(hallwayWidth, 0);
  c.lineTo(hallwayWidth, w / 3);
  
  c.stroke();
  </code></pre>
  
  <p><a href="http://jsfiddle.net/MatthewKosloski/7fyL7a1o/3/" rel="nofollow noreferrer">Here's the link to the code</a></p>