react-pixi Stage options.backgroundColor don't change with state

[jmcoder1]

State changes affect other React-Pixi Stage props, such as height or width. But, when I attempt to change the Stack options.backgroundColor, the backgroundColor does not change on state change.

Here's my code:

const edit = () => {
  const StageElement = {
    id: "ion-1212-2if",
    __typename: "CanvasStage",
    backgroundColor: "#CB6CE6",
    width: 500,
    height: 500,
  } as StageElementType;

  const [state, setState] = useState({
    stage: StageElement
  });
  const { stage } = state;

  // OnClick Canvas Elements
  const onClickCanvas = () => {

    setState({ ...state, stage: {...state, height: 400, width: 400, backgroundColor: "#38B6FF"}});
  };

  return (
    <Layout metaTags={metaTags}>
       <Box m="auto">
              <Stage
                width={stage.width}
                height={stage.height}
                raf={false}
                renderOnComponentChange={true}
                options={{
                  backgroundColor: getHexColorNumber(stage.backgroundColor),
                }}
                onClick={onClickCanvas}
              >
                <Graphics
                  draw={(g) => {
                    g.lineStyle(0);
                    g.beginFill(getHexColorNumber(stage.backgroundColor), 1);
                    g.drawCircle(300, 90, 60);
                    g.endFill();
                  }}
                />
              </Stage>
            </Box>
    </Layout>
  );
};

[inlet]

Hi @jmcoder1,

Thanks for filing this issue!

This is actually the expected behaviour. The Stage.options prop can only be set once during creation. This is how PIXI works. In PIXI you would do something like this:

const options = {
  backgroundColor: 0xff0000,
  antialias: true,
  autoStart: false,
  resolution: 2,
  clearBeforeRender: false,
};

const app = new PIXI.Application(options);

Internally these parameters belong to different parts of PIXI core, for instance the backgroundColor belongs to PIXI.Renderer but forceCanvas belongs to the creation of the internal renderer. These are set during initializing of the PIXI.Application and some of these option parameters can therefore not directly be manipulated via PIXI.Application.

Changing the backgroundColor can be done via app.renderer.backgroundColor: https://codepen.io/inlet/pen/dyZeLLM/3a3524acedbc0ac4accc6c9093cec16d?editors=0110