A demo using Smooth.js and HTML5 canvas to draw a curve through a set of points.

See this blog post for further discussion. You can also see the CoffeeScript source.

---

Drag the points below to move them. Double click to add/remove points.


The meat of the actual curve drawing is in the addCurveSegment function, which samples the output of Smooth.js to create line segments approximating the function.

Notes

Nearest neighbor interpolation isn't included because the results in this case would look identical to linear interpolation. This is because nearest neighbor is discontinuous, and the discontinuities would be spanned by line segments.

Windowed sinc interpolation is not included because I felt that adding a text field to let you enter a window function was a little out of scope for a simple demo.

(This is tested in the latest Chrome, Firefox and Safari.
I cannot vouch for other browsers.)