html5 canvas - animating an object following a path

Question

I\'m a bit new to canvas and such so forgive if it\'s a trivial question.

I\'d like to be able to animate an object following a path (defined as bezier path) but I\'m no

Answer 1

I wouldn't use Canvas for this unless you really have to. SVG has animation along a path built in. Canvas requires quite a bit of math to get it working.

Here's one example of SVG animating along a path.

Here's some discussion about it for raphael: SVG animation along path with Raphael

Please note that Raphael uses SVG and not HTML5 Canvas.

---

One way to animate along a bezier path in Canvas is to continuously bisect the bezier curve, recoring the midpoints until you have a lot of points (say, 50 points per curve) that you can animate the object along that list of points. Search for bisecting beziers and similar queries for the related math on that.