Smooth user drawn lines in canvas

user_345546 0
Viewed 21836

I'm using <canvas> to capture user input in the form of a signature and am trying to figure out how to smooth the input from the mouse.

I think I need to process the user's mouse movements chunk by chunk and smooth each chunk, I'm not after super smoothing but any improvement on the jagged input would be good.

Thanks, Mark

canvas html
6 Answers

I know that this is a 10 years old question but I think the answer is not complete. For a smooth line effect you need to set two properties to the canvas' context :

context.lineCap = 'round'
context.lineJoin = 'round'

The first one is for extremities of one path the second one is for corners of a path.

Some docs on lineJoin.
Some docs on lineCap.

user_66955690
Related