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; 

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

You can also translate by half a pixel in the X and Y directions and then use whole values for your coordinates (you may need to round them in some cases):

context.translate(0.5, 0.5)  context.moveTo(5,5); context.lineTo(55,5); 

Keep in mind that if you resize your canvas the translate will be reset - so you'll have to translate again.

You can read about the translate function and how to use it here:

https://www.rgraph.net/canvas/reference/translate.html

This answer explains why it works that way.