Jump to content
Search Community

DrawSVG in Canvas, is there a better way than this

Luckyde test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey all, after adding

See the Pen MNQpGB by LuckyDe (@LuckyDe) on CodePen

for elCanvas  I wanted to also add the ability to draw an svg outline

In the code pen I attached( which i used the public examples version of drawsvg on) I am attempting this

1) Draw a svg on the document with the same paths as the one in the canvas

2) Animate the svg outlines with drawSVG
3) On update match strokeDasharray to setLineDash and lineDashOffset so the canvas shape gets updated

As you see it works! However every time I would need to draw an svg into the canvas I would first need to put one on the document, I wanted to ask is there a way around this? Is there a way to get the lineDash/DashArray data without having to draw an svg visually? When I put some animations with this effect into our game the devs might get upset I'm drawing all these elements just for reference

I guess this is mainly a question to you awesome devs that made the lib in the first place @GreenSock but also to anyone else who might know.

I had another consideration where I could make modifications to the plugin itself, but I really didn't wanna touch that, trying to do this without needing to modify Gsap code

Thanks in advance!

See the Pen zYOaMNz?editors=1010 by LuckyDe (@LuckyDe) on CodePen

  • Like 2
Link to comment
Share on other sites

20 minutes ago, Luckyde said:

Thanks for the link! Yeah morph was easier to input I think the difference here is drawsvg plugin internally uses svg specific code like the line dash code and get BBox to update the svg that it might not be as easy to implement

Ah! didn't check your first CodePen to see that you had already implemented MorphSVG. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...