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: enter image description here How can i fix this? (browser Google Chrome)

score 22 · Accepted Answer · edited Jan 21 '14 at 22:26

22

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

edited Jan 21 '14 at 22:26

Chris Porter

3,627
25
28

answered Sep 30 '11 at 07:37

chris_b

1,294
1
12
12

1

Thanks! I must begin path from x = 0.5 not 1.0 – Glebka Sep 30 '11 at 08:07
I was struggling with it for hours until I came across this answer. That's weird but it solved my problem – MohammadHossein R Mar 16 '22 at 16:02

score 4 · Answer 2 · answered Sep 06 '12 at 06:58

4

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.

answered Sep 06 '12 at 06:58

Yakovenko Max

327
2
6

4

-1 This removes the anti-aliasing for odd widths, but adds anti-aliasing for even widths. – user247702 Dec 20 '12 at 10:14
Works for lines but not for ‍‍`ctx.fill()` – MohammadHossein R Mar 16 '22 at 16:23

incorrect display lineWidth=1 at html5 canvas

2 Answers2

Linked