How to draw a path partially in HTML5's canvas?

Question

Let's say I have curved path made using a serie of bezierCurveTo() calls. I'd like to make it appear progressively in an animation, by increasing the percentage of it that is drawn frame-after-frame. The problem is that I cannot find a standard way to draw only a part of a canvas path - would someon know of a good way (or even a tricky way) to achieve this?

Answer 1

Sure...and Simon Porritt did all the hard math for us!

jsBezier is a small lib with a function: pointAlongCurveFrom(curve, location, distance) that will let you incrementally plot each point along your Bezier curve.

jsBezier is available on GitHub: https://github.com/sporritt/jsBezier

Answer 2

Just found a small library that does exactly that: https://github.com/camoconnell/lazy-line-painter

It relies on the Raphael lib (http://raphaeljs.com/), and the two put together do not make too big a payload.