steveruizok / perfect-freehand

Draw perfect pressure-sensitive freehand lines.
https://perfectfreehand.com
MIT License
4.52k stars 159 forks source link

[Bug] When drawing to a canvas, fast circles result in frayed lines #36

Closed JanWerder closed 3 years ago

JanWerder commented 3 years ago

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

https://user-images.githubusercontent.com/596986/138428669-5f05170b-6df7-4ad1-b85d-9836542fcdef.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.

steveruizok commented 3 years ago

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.

steveruizok commented 3 years ago

Closing the issue but happy to discuss more in Discussions!

JanWerder commented 3 years ago

Thanks for the tip, works perfectly!