GSAP & Canvas - for loop overwrites tweens

[johnheiner]

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.

[Sahil]

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 also changed the implementation, so instead of using for loop I am using delayedCall and looping through one element at a time.

 

See the Pen MrZRbY?editors=0010 by Sahil89 (@Sahil89) on CodePen.

 

[johnheiner]

YAAAAASSS! Thank you so much for the quick response Sahil

[OSUblake]

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.

[Sahil]

Quote

I don't know what the code looked like before

 

Something like this.

 

See the Pen QaYKVW by Sahil89 (@Sahil89) on CodePen.

 

[OSUblake]

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. 

[Sahil]

Thanks Blake. That's interesting, don't know why I never tried changing canvas height/width using CSS.