Q:

HTML5 Canvas and Line Width

I'm drawing line graphs on a canvas.  The lines draw fine.  The graph is scaled, every segment is drawn, color are ok, etc.  My only problem is visually the line width varies.  It's almost like the nib of a caligraphy pen.  If the stroke is upward the line is thin, if the stroke is horizontal, the line is thicker.  
My line thickness is constant, and my strokeStyle is set to black.  I don't see any other properties of the canvas that affect such a varying line width but there must be.

A:

Live Demo
My live demo basically just recreates what the MDN says. For even stroke widths you can use integers for coordinates, for odd stroke widths you want to use .5 to get crisp lines that fill the pixels correctly.

From MDN Article

If you consider a path from (3,1) to (3,5) with a line thickness of
  1.0, you end up with the situation in the second image. The actual
  area to be filled (dark blue) only extends halfway into the pixels on
  either side of the path. An approximation of this has to be rendered,
  which means that those pixels being only partially shaded, and results
  in the entire area (the light blue and dark blue) being filled in with
  a color only half as dark as the actual stroke color. This is what
  happens with the 1.0 width line in the previous example code.
To fix this, you have to be very precise in your path creation.
  Knowing that a 1.0 width line will extend half a unit to either side
  of the path, creating the path from (3.5,1) to (3.5,5) results in the
  situation in the third image — the 1.0 line width ends up completely
  and precisely filling a single pixel vertical line.

