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

Question

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

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

e.g:

ctx.lineWidth = 1;

How

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.