.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
GSAP & Canvas - for loop overwrites tweens
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
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. Ch
