incorrect display lineWidth=1 at html5 canvas

Question

I have example: https://developer.mozilla.org/samples/canvas-tutorial/4_5_canvas_linewidth.html But first line is not equals 1 pixel: How can i fix this? (browser Google Chrome)

Answer 1

Always add 0.5 pixel to the position of your line to prevent the anti-aliasing.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors#A_lineWidth_example

Answer 2

To make life easier you can move the whole canvas by 0.5px:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.translate(0.5, 0.5); // Move the canvas by 0.5px to fix blurring

It prevents anti-aliasing on all graphics, except images, so you'll have to use +0.5px only for images.