Jump to content


Canvas animation information

Go to solution Solved by OSUblake,

Recommended Posts

First of all, I'm sorry if this is not totally in line with GSAP but the fact that I found most of the information on this forum make me think that this is the right place to ask.

So after browsing the forum, I am now more comfortable with canvas and hope to do things right.
However I'm not sure about some points :

  - Is this the right way to use gsap.ticker on a mouse event? I plan to have a page with several canvas I would put the stackblitz link.  There doesn't seem to be any problem for the moment but I have some doubts


  - If i increase the number of objects to 1000, we can see some performance problems. can i improve this ? I tried to use an offscreen canvas but I can't really understand how to animate it and how to set it up, despite having seen some examples on the forum

Stackblitz: https://stackblitz.com/edit/vitejs-vite-qlxmpw?file=src%2Fstyle.css&terminal=dev


Thx for your time and sorry if this post does not fit the forum 👋

See the Pen qBPJLbB by kirdesmf (@kirdesmf) on CodePen

Link to comment
Share on other sites

Hey there!


I'm afraid canvas isn't really my thing so I can't help here, and as you mentioned this isn't a specifically GSAP related question.

I'm sure someone will be able to help out, you just may not get a response immediately (just managing expectations)

Nice demo by the way, it looks great.

  • Like 1
Link to comment
Share on other sites

Offscreen canvas is a technique to improve performance, but you can't use it for everything. The idea is that you draw something on another canvas, and then draw that canvas on your main canvas instead of using a path.


Here's an old pen that shows the performance difference.


See the Pen EOeBdm by osublake (@osublake) on CodePen


Notice in the draw the method that it will either draw a bitmap i.e. the offscreen screen canvas, or draw a path, which will be slower. The speed improvement happens because I'm using a single bitmap for all the circles, I'm just drawing them at a different size. Think of being kind of like a rubber stamp.


It's the same concept that even faster renderers like PixiJS use for sprites. There is an underlying base texture for every sprite, which is the same as an offscreen canvas. So if you need more performance, you might want to check out PixiJS.




  • Like 3
Link to comment
Share on other sites

So if I understand correctly, in my case, I cant use the offscreen canvas because I have different shapes ? and tbh I wont go with more than 150 objects so maybe there is no need for an offscreen canvas..I will investigate in PixiJs but it was more to understand the native api.
Thx for your answers 

Link to comment
Share on other sites

You can have an offscreen canvas for each of your 4 shapes. The only downside is that your shapes won't have a constant stroke width as you would essentially be scaling an image. It's probably not going to be too noticeable as your shapes are pretty close in size.


But if you're just learning than I would suggest trying out the offscreen technique just to get familiar with it. 


  • Like 1
Link to comment
Share on other sites

Sorry to disturb again.
I tried to use an offscreen canvas but I'm sure if its correct. I made a new codepen, I think its "ok" because when I use filter like drop shadow I dont have any performance issue or less. still not sure. And I'm facing an other issue, I cant find a way to animate the alpha with the offscreen canvas.
Same thing with hsla instead of globalAlpha.

You can toggle useCacheline 167.


See the Pen bGoQZYE?editors=0010 by kirdesmf (@kirdesmf) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Kirdes


I really love your animations! How long have you been messing with canvas?


For the offscreen canvas, you shouldn't create it with the alpha included. Just change the alpha in the draw method.


See the Pen OJxaKXW by GreenSock (@GreenSock) on CodePen


And you really don't need to create a buffer for each particle. You really only need 1 for each color.


See the Pen LYzXwzY by GreenSock (@GreenSock) on CodePen


  • Like 1
Link to comment
Share on other sites

Also, I made a quick change after I noticed you were calling render in your onUpdates, which means render is being called more than it should. For this it would be better to let GSAP's ticker handle that.




Link to comment
Share on other sites

Hey @OSUblake, first I really appreciate that you take the time to check my codepen.

4 hours ago, OSUblake said:

I really love your animations! How long have you been messing with canvas?

😊 Thanks you Blake.

I had a look a few years ago but without much result, must have been lacking in js. I'm back in the canvas game since 1 week.
Now that js and I are friends, I understand better how the canvas api works, which is cool I will be less limited in animation.

I found most of the info on this forum. There are not many good resources about 2D canvas out there.


I think I have understood how to cache an object much clearer now

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