html5 Canvas drawing tutorial (3)—The reason why 1-pixel lines are blurred on canvas_html5 tutorial skills

Continuing from the previous article Canvas line drawing tutorial
As we mentioned last time, canvas sometimes has 1 pixel lines that are blurred and appear to be wider, as shown below:

Such a line is obviously not what we want.
The purpose of this article is to clarify the principle and solve it.
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 does not care, it will try to draw it.
In fact, pixels are also a unit after all. What would happen if we enlarged the canvas to a size large enough to see each pixel clearly? It probably looks like this:

Each pixel has a starting and ending range, as shown in the figure, their range starts from the left, spans 1 pixel, and ends on the right.
If we follow the starting and ending range of pixels when drawing a 1-pixel line, then we will definitely get a very standard thin line. As follows:

But unfortunately, the line drawing method of canvas is different. As we have said in the previous article, each line of canvas has an infinitely thin "center line", and the width of the line extends from the center line to both sides. . If we still draw a line from the second pixel, then the center line of the line will be aligned with the starting point of the second pixel, and then we start drawing, and the problem arises: the line of the Canvas extends to both sides from the center line. Instead of extending to a certain side (for example, here, if it only extends to the right, then our problem is no longer a problem), after extending, our line actually looks like this:

There was another problem at this time: the computer does not allow graphics smaller than 1px, so he made 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 was found: the line in the Canvas aligned the center line with the starting point of the pixel, not the middle point of the pixel.
So how do we solve this painful problem? Maybe someone has already thought: Since the starting points of the two are different, let's make their starting points the same!
We just need to align the center line of the line with the middle point of the pixel!
The middle point of the pixel is easy to find. For example, the middle point of the second pixel is located at 1.5 pixels according to the explanation on the picture. Then the middle point of the x pixel is (x-0.5)px.


Of course, in less rigorous situations, you can also use x 0.5.
Now let’s try out our research results on canvas.

Copy code

The code is as follows:

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();

Looks right?
But it seems that this makes us very confused when drawing the line. Do we have to add this depressing 0.5 every time? Of course not, because most of the time we use variables to save values, we don’t need to add 0.5 to each value
Moreover, for lines with lineWidth>1, we don’t need to worry about it: because only when the line width is 1px , this problem is the most obvious.