HTML5 Canvas Drawing 3:1px line blur problem

Click to view original address: HTML5 canvas drawing 3:1px line blur problem

This article belongs to "HTML5 Canvas Drawing Series Tutorial"

Pick up a canvas drawing line tutorial

The last time we talked about this, canvas sometimes appears with 1-pixel lines that are blurry and seem wider, such as:

This kind of line is obviously not what we want.

The purpose of this article is to find out how it works and how to solve it.

Everyone knows that the smallest display size on the screen is 1 pixels, although something less than 1 pixels may not show up, but the computer doesn't matter, he tries to draw it.

In fact, the pixel is also a unit, if we enlarge the canvas large enough to see clearly each pixel, what will be the situation? It's probably like this:

Each pixel has a starting and ending range, and their range is from left, across 1 pixels, to the right.
If we were to draw a 1-pixel line and follow the Pixel's start and end range, we would definitely get a very standard thread. As follows:

But unfortunately, the line of the canvas is not the same, the previous article we have said, canvas each line has an infinitely thin "midline", the width of the line is from the middle line to both sides of the extension. If we still draw a line from the 2nd pixel, then the midline of the line will snap to the starting point of the 2nd pixel, and then we begin to draw, and the question comes: the Canvas lines extend to the sides of the line, not to one side (for example, If we just extend to the right, then our problem is no longer a problem), after the extension of our line is actually this:

Now there is a problem: the computer is not allowed to appear less than 1px graphics, so he did a compromise: the two pixels are drawn .

So, as a result, the original 1px line, it looks like a 2px wide line.

The reason for the failure was found: line in the canvas aligns the midline with the starting point of the pixel, rather than the middle point of the pixel.

So how do we solve this problem of egg pain? Perhaps someone has thought: since the beginning of the two is not the same, then we will be their starting point to become the same!

Let's align the midline of the line with the middle point of the pixel!

The middle point of the pixel is very easy to find, such as the middle point of the 2nd pixel, according to the figure of the explanation is the position of 1.5 pixels, then the middle point of the X-pixel is (x-0.5) px.

Of course, it is also possible to use x+0.5 on less stringent occasions.

Now let's try out the results of our research on canvas.

1 2 3 4 5 6 7 8 9

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, doesn't it?

But it seems that when we draw the line when it is very tangled, and every time to add this frustrating 0.5? Of course not, because most of the time we use variables to store values, we don't have to add 0.5 to each value.

And, for Linewidth>1 's line , we don't have to worry about it: The problem is most obvious when the line is only 1px wide.

From the original: Click to view the original address Note: This article is only used for the usual problems accumulated collection, not suspected of any misappropriation. Please try to check the original address, thank you for understanding!

HTML5 Canvas Drawing 3:1px line blur problem