Canvas line behavior when 0 <lineWidth <1

Question

Out of curiosity, I wanted to try setting lineWidth < 1 , because 1px lines looked bold even with the correct resolution. Unsurprisingly, this does not work, but there is such a weird behavior in Chrome and Firefox (not tested elsewhere):

On the left is the line lineWidth = 1, the center is the lineWidth = 0.5, and on the right is the lineWidth = 0.1

They were generated using this code:

 ctx.lineWidth = 0.1; lis.each(function(i) { sx = $(this).offset().left; sy = $(this).offset().top; ex = sx - (20 * (6-i)); ey = wh - 80 - (20 * (i + 1)); eey = ey - (20 * i); // Horizontal ctx.moveTo(sx,sy+7); ctx.lineTo(ex, sy+7); ctx.stroke(); // Vertical ctx.moveTo(ex,sy+7); ctx.lineTo(ex, ey); ctx.stroke(); // Horizontal ctx.moveTo(ex,ey); ctx.lineTo(ww - bg_img_width + 100, eey); ctx.stroke(); }); 

They are printed in the order in which their children appear, so it starts with Alpha every time and ends with Epsilon.

Can someone explain why the lines get smaller when the loop progresses, when 0 < lineWidth < 1 ? Is this intended? Can it be used for cooling?

Answer 1

First of all, you need to recall that the points in the canvas are focused on (0.5; 0.5), therefore, to draw a net width of 1px wide, you need to draw integer coordinates + (0.5, 0.5).

Then, to emulate the thickness, the rendering will play on the opacity: the 0.5 line will be displayed with less opacity to make it weaker.
Note that smoothing works the same way: it scatters a point at several adjacent points with less weight to simulate the thickness of the line.

You can play using the script below, I am comparing several ways to draw a triangle.

I think we have the same visual effect as lineWidth = 0.5 when we paint with opacity 0.8, for example.

The first two lines are here to show the difference in rendering when using integer coordinates vs when using integer + 0.5 coordinates. We see that when using integer coordinates, the lines overlap by two pixels and appear wider.
We also see that anti-aliasing is not so good, since the diagonal always seems thicker (the same in Chrome or Firefox here).

http://jsbin.com/voqubexu/1/edit?js,output