I'm trying to make a simple square object flash green, blue, and red based on different conditions. I understand that there is no direct way to change the colour of a Graphics object in PixiJS. Currently, I create three Graphics objects which are identical except for the colours. By overlapping these objects and adjusting the visibility, I am able to accomplish the flashing animation.

I was wondering if there is a better way to "change" the colour instead of cheating it with visibility.

My current code:

let square_red = new PIXI.Graphics();
square.beginFill(red, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.position.set(x, y);

let square_green = new PIXI.Graphics();
square.beginFill(green, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.position.set(x, y);

let square_blue = new PIXI.Graphics();
square.beginFill(blue, opacity);
square.lineStyle(lineStyle);
square.drawRect(0, 0, width, height);
square.position.set(x, y);

square_red.visible = true;
square_green.visible = false;
square_blue.visible = false;