Animating Quadratic Bezier Curve Drawn in Canvas

[adityanithariya]

I'm new to GSAP, and currently learning how things work in it.

I have created a Quadratic Curve in canvas using quadraticCurveTo() and wanted to animate it, drawing it from starting point to end point.

How can I achieve this?

Thanks in Advance!

See the Pen OJaOvyw by adityanithariya (@adityanithariya) on CodePen

[Rodrigo]

Hi @adityanithariya and welcome to the GreenSock forums!

 

There is not a super easy way to animate the paths using the bezier curve methods the Canvas API has.

 

This approach from @OSUblake (GSAP's canvas/WebGL wizard) is far simpler:

See the Pen GjYpPM by osublake (@osublake) on CodePen

 

These are the keys to this:

https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash

 

It requires to get the path as an SVG path data, but that should be far simpler than creating this using the quadraticCurveTo() method.

 

Hopefully this helps.

Happy Tweening!

[adityanithariya]

Thanks a lot, but can you let me know how can I get this path string from Path2D object, or how can I recreate it as string path?

[Rodrigo]

Hi,

 

Any SVG editor could do that. Keep in mind that a quadratic bezier has one control point for each point you add:

quadraticCurveTo(cpx, cpy, x, y)

In SVG quadratic curves are drawn in a different way but is not that complicated though:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#quadratic_bézier_curve

 

You can use this library:

https://www.npmjs.com/package/canvas2svg

 

Here are a couple of options as well:

https://boxy-svg.com/

https://editor.method.ac/

 

Finally in order to get everything working as expected I normally use this to make sure that the paths are OK:

https://jakearchibald.github.io/svgomg/

 

Finally @Carl made a video about Boxy SVG:

Hopefully this helps.

Happy Tweening!