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

The fillRect() method can be used to draw thin horizontal or vertical lines in canvas (without having to apply the +0.5 shift on coordinates):

this.fillRect(left, top, 1, height);
this.fillRect(left, top, width, 1);

And you can actually make the lines even thinner by just replacing this code by something like:

this.fillRect(left, top, 0.7, height);
this.fillRect(left, top, width, 0.7);

Lines will be thinner (tending to reach 1 pixel wide) but their color a bit attenuated.

-> working example

To be noted that if we set ctx.lineWidth=0.7 (for the classical beginPath/moveTo/lineTo/stroke sequence), it does not work on Chrome (0.7 and 1 are interpreted the same way). Thus an interest for this fillRect() method.