Writing a paint program à la MS Paint - how to interpolate between mouse move events?

Question

I want to write a paint program in the style of MS Paint.

For painting things on screen when the user moves the mouse, I have to wait for mouse move events and draw

Answer 1

Live demos

• version 1 - more smooth, but more changing while you draw: http://jsfiddle.net/Ub7RV/1/
• version 2 - less smooth but more stable: http://jsfiddle.net/Ub7RV/2/

The way to go is 

Spline interpolation of the points

The solution is to store coordinates of the points and then perform spline interpolation.

I took the solution demonstrated here and modified it. They computed the spline after you stop drawing. I modified the code so that it draws immediately. You might see though that the spline is changing during the drawing. For real application, you probably will need two canvases - one with the old drawings and the other with just the current drawing, that will change constantly until your mouse stops.

Version 1 uses spline simplification - deletes points that are close to the line - which results in smoother splines but produce less "stable" result. Version 2 uses all points on the line and produces much more stable solution though (and computationally less expensive).