Pixi.js: Fallback to canvas and forceCanvas=true fails with autoDetectRenderer in 5.0.3 using 'pixi.js-legacy'

[stagr]

I am not sure if this is a bug or a problem with the way we import pixi in our project. We come from using PIXI 4 and recently migrated to 5.0.2 where we managed to get all our legacy up and running both in browser environment (create-react-app with typescript and webpack) and our test envionment (create-react-app, jest, jsdom). Now upgrading from 5.0.2 to 5.0.3 we see some new problems, as described below.

Thanks in advance for any help solving our problems.

Expected Behavior

(This was working in 5.0.2)

import * as PIXI from 'pixi.js-legacy';
const renderer = PIXI.autoDetectRenderer({forceCanvas: true});

renderer contains a CanvasRenderer.

Current Behavior

In 5.0.3 the same code results in an error:
"WebGL unsupported in this browser, use \"pixi.js-legacy\" for fallback canvas2d support"

Possible Solution

It seems like the override of the static function PIXI.Renderer.create in canvas-renderer is not working as it should when importing the bundle they way we do. Should we be using another form of import when we want to support canvas?

Logging PIXI.Renderer.create during runtime (in Chrome running on Windows 10) results in:

function create (options)
    {
        if (Object(__WEBPACK_IMPORTED_MODULE_1__pixi_utils__["isWebGLSupported"])())
        {
            return new Renderer(options);
        }

        throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.');
    }

Logging PIXI.Renderer.create during runtime (in test environment Create-React-App with Jest) results in:

      Renderer: function create(options)
          {
              if (utils.isWebGLSupported())
              {
                  return new Renderer(options);
              }

              throw new Error('WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.');
          }

Steps to Reproduce

Import the pixi legacy bundle from 5.0.3
import * as PIXI from 'pixi.js-legacy';

Use autodectRenderer and make sure browser does not support WebGL or suply { forceCanvas: true } as options.

I tried reproducing the problem in the PIXI Playground (https://www.pixiplayground.com/#/edit/LBQHXurMCiJdVd4vYmYED) but using the bundle directly as version in the playground ("https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-legacy.js") works just fine.

The same log from the playground prints the overridden Renderer.create:

function create(options)
    {
        var forceCanvas = options && options.forceCanvas;

        if (!forceCanvas)
        {
            try
            {
                return parentCreate(options);
            }
            catch (err)
            {
                // swallow WebGL-unsupported error
            }
        }

        return new CanvasRenderer(options);
    }

I will rollback to 5.0.2 again and log Renderer.create again during runtime but I assume it will show the correct overloaded version.

Environment

• pixi.js version: 5.0.3 (in 5.0.2 this was working!)
• Browser & Version: Chrome 74.0.3729.157
• Environment: Create-React-App (WebPack) (also present in test Create-React-App with Jest and jsdom)
• OS & Version: Windows 10
• Running Example: -

[struz]

I'm also running into this problem and it's a pretty big deal for me because I need backwards compatibility.

Reverting to 5.0.2 also fixes it.

[bigtimebuddy]

Does it show in 5.0.4?

[stagr]

I had other problems in 5.0.4 that stopped me from compiling and running. This week I will make attempt to get 5.0.4 up and running so I can test this issue in 5.0.4. Or did you try this allready in 5.0.4 @struz? In that case there is no use for me trying on 5.0.4 since this is a stopper for our migration to PIXI 5.

[stagr]

@bigtimebuddy I managed to compile and run our project with Canvas legacy in 5.0.4. So for me we can close the issue.

@struz do you agree?

[stagr]

Closing the issue since there was no reply from @struz.

[K3vinF]

I am aware that this might not be the most useful comment, but I was experiencing the same error.
Even though I was using pixi.js-legacy, and initializing pixi with the forceCanvas option. I was still seeing the WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.' error in IE11.

After some uninstalling and reinstalling of pixi.js and pixi.js-legacy modules, it _suddenly_ worked. Sorry to be bit vague here, because I am still not sure what actually _fixed_ the issue in this case.
However when the error was present, I could find the WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.' text in some of the modules in the @pixi folder.

In the (working) versions that I have right now, I can't find this anymore. So maybe there was an error in the package.json that caused incorrect versions of the @pixi libraries to be loaded?

this.pixi = new PIXI.Application({forceCanvas: true});

[rvanderspuy]

I can also confirm that setting forceCanvas: true has no effect (5.2.1).
Using the CanvasRenderer gives me this error:

canvas-renderer.es.js:581 Uncaught TypeError: displayObject.renderCanvas is not a function
    at CanvasRenderer.render

this.context = context;
displayObject.renderCanvas(this);
this.context = tempContext;

[themoonrat]

You must use the pixi-legacy package
https://www.pixiplayground.com/#/edit/DkKExAANLBcZTn1fCB62P is confirmation of 5.2.1. of pixi-legacy being used, with forceCanvas: true working

[alforno]

https://www.pixiplayground.com/#/edit/DkKExAANLBcZTn1fCB62P is confirmation of 5.2.1. of pixi-legacy being used, with forceCanvas: true working

The example at the link above does not work in Chrome Version 85.0.4183.102 on Win10. In case anyone is wondering, I did change the settings so that version 5.2.1 was being used, since that is no longer the default at that link. It did not work. The only thing that worked was going back to v4.8.9

Uncaught Error: WebGL unsupported in this browser, use "pixi.js-legacy" for fallback canvas2d support.
    at Function.create (Renderer.js:50)
    at autoDetectRenderer (autoDetectRenderer.js:36)
    at new Application (Application.js:67)
    at demo.js:8
    at updateDemoCode (VM12 results.e90820cdc965e7f24b1c.js:146)
    at VM12 results.e90820cdc965e7f24b1c.js:128
    at HTMLScriptElement.next (VM12 results.e90820cdc965e7f24b1c.js:159)
create @ Renderer.js:50
autoDetectRenderer @ autoDetectRenderer.js:36

[MentalGear]

Here's an updated version that has the legacy version set in the "Settings" Option.