CODEWITHSUNDEEP
htmlcanvashtml5-canvas
Glebka
Glebka

Reputation: 1678

incorrect display lineWidth=1 at html5 canvas

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)

Upvotes: 11

Views: 5614

Answers (2)

chris_b
chris_b

Reputation: 1294

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

Upvotes: 22

Yakovenko Max
Yakovenko Max

Reputation: 337

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.

Upvotes: 4

Related Questions