I'm not familiar with PixiJS in any way other than knowing that it's a game engine. What is the difference between doing single PIXI.Graphics for the whole canvas vs PIXI.Graphics for every rectangle? Pros / cons?
I see you saw the response on the issue, for anyone else this was the response:
The golden rule is the less you have to clear() and redraw the insides of the graphics the faster it's going to be as pixi.js has to convert your draw commands to triangles to pass to WebGL, if you're just moving the position of something it can use the already calculated triangles and just add an offset before drawing whereas previously you were generating new triangles and hardbaking the position into the triangles each frame.
Because you move each rectangle at a different rate I used a separate graphics instance so that we could move them without having to redraw them.
The golden rule is the less you have to clear() and redraw the insides of the graphics the faster it's going to be as pixi.js has to convert your draw commands to triangles to pass to WebGL, if you're just moving the position of something it can use the already calculated triangles and just add an offset before drawing whereas previously you were generating new triangles and hardbaking the position into the triangles each frame.
Because you move each rectangle at a different rate I used a separate graphics instance so that we could move them without having to redraw them.