html5 Canvas drawing tutorial (3)—The reason for 1 pixel line blurring in canvas

Comment: Last time we mentioned that canvas sometimes have 1 pixel lines that are blurred and seem to be wider. Such lines are obviously not what we want. The purpose of this article is to figure out the principles and solve them. Interested friends can learn more.

Last time we mentioned that canvas sometimes have 1 pixel lines that are blurred and seem to be wider, as shown in the figure below:

Such lines are obviously not what we want.

The purpose of this article is to figure out the principles and solve them.

Everyone knows that the smallest display size on the screen is 1 pixel. Although things smaller than 1 pixel may not be displayed, the computer doesn't care and will try to draw it.

In fact, pixels are also a unit after all. If we enlarge the canvas to a large enough size to see each pixel clearly, what would happen? It's probably like this:

Each pixel has a start and end range, as shown in the figure, their range starts from the left, spans 1 pixel, and stops right.

If we follow the pixel start and end range when drawing 1 pixel lines, then we will definitely get a very standard thin line. as follows:

But unfortunately, the lines of canvas are drawn differently. As we have already said in the previous article, each line of canvas has an infinitely thin midline, and the width of the line extends from the midline to both sides. If we still draw a line from the second pixel point, then the midline of the line will be close to the starting point of the second pixel, and then we start drawing, and the problem comes: the Canvas line extends to both sides with the midline, rather than to one side (for example, here, if it only extends to the right, then our problem is no longer a problem). After extension, our line is actually like this:

There is another problem at this time: the computer does not allow graphics less than 1px, so he did a compromise: draw both pixels.

So, in this way, the original 1px line becomes a line that looks 2px wide.

The reason for the failure is found: the line in Canvas aligns the midline with the starting point of the pixel, not the middle point of the pixel.

So how do we solve this painful problem? Maybe some people have already thought of: Since the two starting points are different, let’s make their starting points the same!

We just need to align the middle line of the line with the middle point of the pixel!

The intermediate point of the pixel is easy to find. For example, the intermediate point of the second pixel is the position of 1.5 pixels according to the explanation on the figure, so the intermediate point of the x pixel is (x-0.5)px.

Of course, in less rigorous occasions, you can use x+0.5.

Now let's try our results on canvas.

ctx.moveTo(100.5,100.5);

ctx.lineTo(200.5,100.5);

ctx.lineTo(200.5,200.5);

ctx.lineTo(100.5,200.5);

ctx.lineTo(100.5,100.5);

ctx.closePath();

ctx.lineWidth = 1;

ctx.strokeStyle = 'rgba(255,0,0,0.5)';

ctx.stroke();

It looks right?

But it seems that when we draw lines, we are very confused. Do we always add this depressing 0.5? Of course not, because we use variables to save values ​​most of the time, so we don't need to add 0.5 to each value

Moreover, for lines with lineWidth>1, we don't have to worry about it: because this problem is the most obvious when the line is 1px wide.