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

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.