Bug: Transparent Background doesn't work

[achubutkin]

Current Behavior

The background transparency is not set further if I initialize the application with an opaque background.

Expected Behavior

The background transparency should be set further if I initialize the application with an opaque background.

Steps to Reproduce

1. Open example here https://pixijs.com/examples/basic/transparent-background
2. Remove backgroundAlpha from constructor options.
   const app = new PIXI.Application({ backgroundColor: 'green', resizeTo: window });
   // ... some code
3. Set a new background (red + 0.5 alpha)
   app.renderer.background.color = 'rgba(255, 0, 0, 0.5)'; // doesn't work

Note: If backgroundAlpha is set to 0 in constructor then step 3 is works.

Environment

• pixi.js version: 7.3.3
• Browser & Version: Chrome 120.0.6099.225
• Running Example: https://codesandbox.io/p/sandbox/zealous-hill-f36s39?file=%2Fpackage.json%3A14%2C5

Possible Solution

No response

Additional Information

No response

[naramdash]

I have a same issue on my private project.

    this.#pixiApp.renderer.background.color = "rgb(255,0,0)";
    this.#pixiApp.renderer.background.alpha = 0.5;

background is applied without alpha.

Environment

• pixi.js version: 7.4.0
• Browser & Version: Ubuntu 22.04 Edge 121.0.2277.83 (Official build) (64-bit)

[bigtimebuddy]

I looked into this, the reason this is happening is because alpha is only used on the canvas when it is initialized. There are some performance implication by having alpha or not enabled on the canvas, for many browser opaque canvases are faster. Once options are set using canvas.getContext, they cannot be changed. Here's a simple example: https://jsfiddle.net/bigtimebuddy/m9kehdqx/

Here are the initialization methods for each renderer if you'd like to see how it's being used.

Renderer

pixijs/packages/core/src/context/ContextSystem.ts

Line 205 in 4c964ef

const alpha = this.renderer.background.alpha < 1;

CanvasRenderer

pixijs/packages/canvas-renderer/src/CanvasContextSystem.ts

Line 74 in 4c964ef

const alpha = this.renderer.background.alpha < 1;

The workaround is make sure you set alpha to be < 0 when you create the Application or Renderer.

One small suggestion we could make is if the canvas is opaque (because of how you initialized), we could provide a console warning when trying to change the alpha after the fact. Something like:

The canvas has already been initialized as non-transparent. If you'd like to adjust alpha of the canvas after initializing the renderer, please set the initial value less than 1.

Some documentation might also clarify this behavior.