MorphSVGPlugin with Canvas

[Frederic Gontier 8 Likes (Newbie)]

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

[ZachSaucier 7,061 Likes (Superhero)]

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

[OSUblake 18,368 Likes (Superhero)]

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

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

 

[OSUblake 18,368 Likes (Superhero)]

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

 

[Frederic Gontier 8 Likes (Newbie)]

Hello,

Thank you so much for your help guys!

I have updated the codepen and it is working now.

fred