brushstroke icon indicating copy to clipboard operation
brushstroke copied to clipboard

A few notes about stroke lineWidths

Open Jetroid opened this issue 4 years ago • 0 comments

First note:

Google Chrome has a bug where perfectly straight strokes with lineWidths below 0.0625 do not render.

This bug affects brushstroke too - compare this fiddle in both Chrome and Firefox.

We can compensate for this browser bug by making sure that the lines are never perfectly straight. We can do this by ensuring the dx and dy of a segment are never 0, but instead some small value:

dx = dx === 0 ? 0.0001 : dx;
dy = dy === 0 ? 0.0001 : dy;

... and putting it just before line 234. In my testing that fixes the problem.

Second note:

According to the whatwg spec on lineWidth:

The lineWidth attribute gives the width of lines, in coordinate space units. On getting, it must return the current value. On setting, zero, negative, infinite, and NaN values must be ignored, leaving the value unchanged; other values must change the current value to the new value.

I noticed that around line 335 of Brushstroke, there are several ways that per can become 0. per is multiplied with inkAmount to determine the lineWidth, meaning we would also try to set lineWidth to 0. This is then ignored by the browser and the lineWidth remains unchanged.

In these cases, I believe the intention of the code was to mean "do not draw a line", but the reality is that the line will be drawn with the width of whatever line was last drawn (though the spacing of the hairs are reduced to all be together).

I don't know if this causes any actual bugs, but it does lead to some weird situations where a thin line is still drawn despite inkAmount being set to 0.

A quick check of if (per > 0) on line 336 can prevent this, as can be seen here.

Let me know what you think.

Jetroid avatar Jan 02 '21 15:01 Jetroid