CODEWITHSUNDEEP
htmlcanvashtml5-canvas
Gnurou
Gnurou

Reputation: 8143

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

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?

Upvotes: 6

Views: 642

Answers (2)

Gnurou
Gnurou

Reputation: 8143

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.

Upvotes: 2

markE
markE

Reputation: 105035

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

Upvotes: 3

Related Questions