Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Is there a built-in way in javascript to animate an object (an image for example) along a path you’ve drawn using bezierCurveTo or quadraticCurveTo? What I’m trying to do is precisely animate the trajectory and landing spot of a ball if that helps.
No, sorry. Really that’s the short answer here. There’s not, at least not in canvas.
There is a way to animate along a path in SVG though. In fact you could animate along SVG and capture all of the x,y points as you go to use in Canvas, though that’s probably really inefficient.
The other way is to do the math to bisect (split) a bezier curve, which coincidentally gets you the midpoint of that curve. Then bisect the two smaller curves. Do this over and over and eventually you get a list of midpoints that you can use to plot the trajectory of the object you want to animate.