Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Frederic Gontier

MorphSVGPlugin with Canvas

Recommended Posts

Hello,

I am trying to morph 2 simple SVG paths in the canvas renderer...

They have stroke no fill... Is it possible or am I doing something wrong?

Thanks a lot for your help,

Fred

See the Pen qBBwqRQ by fr3d3ric (@fr3d3ric) on CodePen

Link to comment
Share on other sites

15 minutes ago, Frederic Gontier said:

They have stroke no fill... Is it possible or am I doing something wrong?

The result that you have is correct for what you're actually doing. You could simplify your render function a bit though:

 

See the Pen jOORYvP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But I'm assuming you want the canvas version to look like the SVG version. You just have to adjust the context's lineWidth and strokeStyle at that point:

 

See the Pen pooBpQy?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

If you want to draw a stroke, then draw a stroke.

// ctx.fill("evenodd");
ctx.stroke();

 

  • Like 1
Link to comment
Share on other sites

And canvas.width/canvas.height is not the same thing as setting width and height in css. Canvas is an image, so canvas.width/canvas.height is the same thing as the natural width and height of an image. Setting the width or height in css scales it.

 

See the Pen 5d6c7f7564f723d7ba600f9fd18dfcaf by osublake (@osublake) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Hello,

Thank you so much for your help guys!

I have updated the codepen and it is working now.

fred

  • Like 1
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.
×