Bug: Transparent Background doesn't work about pixijs HOT 2 OPEN

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

CanvasRenderer

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.

from pixijs.

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)

from pixijs.