Pixi.js: How to use PIXI.Application() when there is already a canvas element in HTML?

[afarber]

Good evening,

my issue is not a bug, but more my difficulty to understand the documentation.

I am using pixi.js version 5.2.0 to create a word app at Facebook and your library is great, thank you all very much for developing it.

However recently I have migrated my code from pixi.js 4 to 5 and I am not sure how to change my code:

        var ratio = BOARD_WIDTH / (BOARD_HEIGHT + SmallTile.HEIGHT);
        var renderer = new PIXI.Renderer({
                width: BOARD_WIDTH,
                height: BOARD_HEIGHT + SmallTile.HEIGHT, 
                view: document.getElementById('board')
        });

        window.onresize = function(event) {
            var w = Math.min(window.innerWidth, screen.width) - 2 * MENU_WIDTH;
            var h = Math.min(window.innerHeight, Math.round(.7 * screen.height));

            if (w / h >= ratio) {
                w = Math.round(h * ratio);
            } else {
                h = Math.round(w / ratio);
            }

            renderer.view.style.width = (w - 2 * PADDING) + 'px';
            renderer.view.style.height = (h - 2 * PADDING) + 'px';
        };

        window.onresize();

My problem is that the v5 doc suggests:

const app = new PIXI.Application();

// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);

But I already have a canvas element in my HTML file:

   <TABLE WIDTH="100%"><TR>
   <TD ALIGN="center"><CANVAS ID="board" STYLE="border: 1px dotted white;"></CANVAS></TD>
   </TR></TABLE>

How can I please use the new PIXI.Application, but attach it to the existing canvas element?

As you see probably see from my code I am not very proficient in the latest Javascript syntax, but I think my issue is very simple, I am just missing some guidance. Thank you.

Environment

• pixi.js version: 5.2.0
• Browser & Version: Opera
• OS & Version: Win 10
• Running Example: https://apps.facebook.com/slova-farbera/

Here the error reported by some of my game users (using Opera browser or maybe Yandex browser - the communication with the user is challenging, she is an elderly lady):

[bigtimebuddy]

Do something like you were doing in v4, pass the view option to the Application constructor:

const app = new Application({ view: document.getElementById(“board”) })

Check out the docs: http://pixijs.io/docs

[afarber]

Thank you, I will try this right away and report back.

[afarber]

Thank you, the following has worked for me and I will report later if that elderly lady with the weird Yandex browser replies. My new code is:

        var ratio = BOARD_WIDTH / (BOARD_HEIGHT + SmallTile.HEIGHT);
        var app = new PIXI.Application({
                width: BOARD_WIDTH,
                height: BOARD_HEIGHT + SmallTile.HEIGHT, 
                view: document.getElementById('board'),
                antialias: true,
                backgroundColor: 0xFFFFFF
        });

        window.onresize = function(event) {
            var w = Math.min(window.innerWidth, screen.width) - 2 * MENU_WIDTH;
            var h = Math.min(window.innerHeight, Math.round(.7 * screen.height));

            if (w / h >= ratio) {
                w = Math.round(h * ratio);
            } else {
                h = Math.round(w / ratio);
            }

            app.renderer.view.style.width = (w - 2 * PADDING) + 'px';
            app.renderer.view.style.height = (h - 2 * PADDING) + 'px';
        };

        window.onresize();

[eXponenta]

I reopen issue because this is feature support problem.
Pixi v5 not include canvas2d renderer in main package, you must use pixi-legacy.js instead.

У вас другая проблема, как я вижу по скриншоту.
Пикси не поддерживает canvas2D в основном (pixi.js) пакете, вы должны использовать его legacy версию - pixi-legacy.js

Thank you, the following has worked for me and I will report later if that elderly lady with the weird Yandex browser replies. My new code is:

        var ratio = BOARD_WIDTH / (BOARD_HEIGHT + SmallTile.HEIGHT);
        var app = new PIXI.Application({
                width: BOARD_WIDTH,
                height: BOARD_HEIGHT + SmallTile.HEIGHT, 
                view: document.getElementById('board'),
                antialias: true,
                backgroundColor: 0xFFFFFF
        });

        window.onresize = function(event) {
            var w = Math.min(window.innerWidth, screen.width) - 2 * MENU_WIDTH;
            var h = Math.min(window.innerHeight, Math.round(.7 * screen.height));

            if (w / h >= ratio) {
                w = Math.round(h * ratio);
            } else {
                h = Math.round(w / ratio);
            }

            app.renderer.view.style.width = (w - 2 * PADDING) + 'px';
            app.renderer.view.style.height = (h - 2 * PADDING) + 'px';
        };

        window.onresize();

[afarber]

Thanks for your comment Konstantin and let's stick to English lanuage :-)

Do you mean I should keep the

<script type='text/javascript' src='//cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js?ver=5.3.2'></script>

and add another line with pixi.js-legacy.js? And how to get it activated?

[eXponenta]

Legacy build is same as pixi.js build, but include canvas renderer.
I don't know why it doesn't exist on cdn, but you can download it by this link:
http://pixijs.download/v5.2.0/pixi-legacy.min.js

Pass forceCanvas:true to Application options for activate legacy mode.

[afarber]

Yes, the lady just reported back, that her issue "This browser does not support WebGL" is not solved - so switching to PIXI.Application was not enough there.

But I think I will better ignore her problem, because I don't want to downgrade the experience of all the rest users by switching to legacy and forceCanvas:true

Thank you

[eXponenta]

Pixi (pixi legacy) must automatically detect supported renderer ('forceCanvas:false') when you use Application.

If it isn't true, it is bug.

[bigtimebuddy]

This seems answered now. Can we close this @eXponenta?