how to draw smooth curve through N points using javascript HTML5 canvas?

Question

For a drawing application, I\'m saving the mouse movement coordinates to an array then drawing them with lineTo. The resulting line is not smooth. How can I produce a sing

Answer 1

As Daniel Howard points out, Rob Spencer describes what you want at http://scaledinnovation.com/analytics/splines/aboutSplines.html.

Here's an interactive demo: http://jsbin.com/ApitIxo/2/

Here it is as a snippet in case jsbin is down.

    
      
        
        
      
      
        

          Click to build a smooth path. 
          (See Rob Spencer's article)
          
 Show points
          
 Show control lines
          

          
             Tension (0.5)