Open psychedelicious opened 1 month ago
I see the issue on my Mac with Firefox. But I don't think there is much we can do from Konva side. That looks like a Firefox bug. The only solution I can think of is drawing such a large stroke manually as a large blob (like a closed path that goes around stroke border).
Occasionally on Firefox, when drawing lines, there are artifacts. Single pixels or a line of pixels are unexpectedly fully transparent. The issue is reproducible - if you destroy/recreate layer, change vsibility, or restart the browser, so long as the window and zoom and points/attrs don't change, the artifacts are identical.
If you cache the node, there are often similar artifacts except up in different places. Unfortunately these artifacts are "real" and appear in blobs or images created from the node.
The issue appears to be that the
lineCap
isn't drawn correctly. Issue only appears with specific combinations of:lineCap
points
Strangely, the problem seems to occur more when drawing towards the bottom-right corner of the page, but maybe this is placebo.
When using native canvas to draw, there is no such problem. I cannot reproduce the issue on Chromium browsers.
To reproduce the issue:
strokeWidth
to 100lineCap
or set to defaultbutt
- this makes it much more commonlastPoint.points()
in themouseup
handler to get a reproducible set of points for the given configBelow is a repro that works on my system, when the window is at the just the right size. A button changes rendering w/
Konva.Line
to native context.Here's a video, bc this probably won't reproduce the specific instance of the problem on your system. Red = draw with
Konva.Line
, green = draw with native context.This can occur with any
pixelRatio
. In the video/repro, mypixelRatio
is 1, matchingwindow.devicePixelRatio
.