Drawing a 1px thick line in canvas creates a 2px t

Question

In this jsfiddle there's a line with a lineWidth of 1.

http://jsfiddle.net/mailrox/9bMPD/350/

e.g:

ctx.lineWidth = 1;

However the line is 2px thick when it's drawn on the canvas, how do you create a 1px thick line.

I could draw a rectangle (with 1px height) however I want the line to also work on diagonals. So how do you get this line to be 1px high?

Thanks!

Answer 1

Canvas calculates from the half of a pixel

ctx.moveTo(50,150.5);
ctx.lineTo(150,150.5);

So starting at a half will fix it

Fixed version: http://jsfiddle.net/9bMPD/357/

This answer explains why it works that way.

Answer 2

If none of these answers worked for you, check your browser zoom. Mine was somehow at 125% so every fourth 1px line was drawn 2px wide.

I spent hours trying to figure out why every fiddle on the internet worked and mine didn't (the zoom was only set for my dev tab)