[Bug] When drawing to a canvas, fast circles result in frayed lines
JanWerder opened this issue · 3 comments
Hello,
Thanks for your work on this amazing library. I want to use it in combination with a canvas but I have the following phenomenon
video_2021-10-22_11-16-48.mp4
As you can see, the first straight and slow lines work perfectly, but as soon as I start drawing quick circles the lines start to fray. Is there anything I can do to circumvent that? Let me know if you need any additional informations.
Hey, it looks like you’re not clearing the canvas before drawing the new line.
The easiest way to fix this is to call clearRect at the beginning of each frame (or whenever you want to update the image) in order to clear the canvas, then repaint all of the old lines, and then paint the new one too. You can make this more efficient by using two canvases, one for lines that are finished and another for the current line, so that you don’t have to repaint the old lines as often.
Why the jagged lines? This is something I call “sawblading” and it’s a result of the streamlining that the algorithm applies to your points. Basically the last point will try to be very close to your pointer, but other points will be placed closer to their previous point; so that a point will change positions depending on whether it’s the last one or not. You can reduce this effect by setting the last option to false until the line is complete.
Closing the issue but happy to discuss more in Discussions!
Thanks for the tip, works perfectly!