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

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).

You can make them really smooth using splines: http://freespace.virgin.net/hugo.elias/graphics/x_bezier.htm

But you'll have to delay the drawing of each line segment until one frame later, so that you have the start and end points, plus the next and previous points available for the calculation.

so, as I see the problem of jagged edge of freehand made curve, when the mouse are moved very fast, is not solved !!! In my opinion there are need to work around with the polling frequency of mousemove event in the system i.e. using different mouse driver or smf.. And the second way is the math.. using some kind of algorithm, to accuratly bend the straight line between two points when the mouse event is polled out.. For clear view you can compare how is drawed free hand line in photoshop and how in mspaint.. thanks folks.. ;)