Jump to content
Search Community

GSAP & Canvas - for loop overwrites tweens

johnheiner 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

Hi all,

 

I'm trying to recreate the effect I created below,  but in canvas for performance reasons.

 

Problem is My function loops over all the colors and instead of creating all independent shapes on the canvas with their own timing, it overwrites the arc on the canvas. I relatively new to canvas so, sorry if it's obvious. Thanks for the help!

 

 

 

See the Pen 9db14b8d46eff2e950513ef3fc0f5744 by johnheiner (@johnheiner) on CodePen

 

 

See the Pen 38384ff84e88460376d93e03cb43ccbd by johnheiner (@johnheiner) on CodePen

 

See the Pen 9db14b8d46eff2e950513ef3fc0f5744 by johnheiner (@johnheiner) on CodePen

Link to comment
Share on other sites

10 hours ago, Sahil said:

It was because you were updating canvas height n width on every frame, though I don't know why it should cause the issue. 

 

I don't know what the code looked like before, but changing the width or height of a canvas erases everything and resets any changes made to the context.

  • Like 1
Link to comment
Share on other sites

Yep. That's clearing and resetting the entire canvas. Setting the width and height attribute changes the internal dimensions of the canvas. And it's faster to set it directly.

 

// This does the same thing...
$("canvas").attr({ width: page.w, height: page.h });

// as this...
canvas.width = page.w;
canvas.height = page.h;

 

 

One thing that is confusing about canvas is understanding width and height. Changing the internal size is different than setting the size with CSS. Changing the size of a canvas with CSS causes it to scale, just like an image. To match the resolution of HiDPI screens, like retina and phone displays, a resize should actually look like this.

 

var resolution = window.devicePixelRatio || 1;

// size/resize the canvas
canvas.width = page.w * resolution;
canavs.height = page.h * resolution;
canvas.style.width = page.w + "px";
canvas.style.height = page.h + "px";
context.scale(resolution, resolution);

 

 

And there's some other stuff that isn't needed in the code, like setting the globalCompositeOperation to source-over. That's the default. And the closePath() call isn't needed if you're drawing a circle. closePath() is the same thing as the "z" command on an SVG path. 

  • Like 3
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...