forceCanvas property of PIXI.Application having no affect.

[Twelve47Kevin]

G.App = new PIXI.Application({forceCanvas: true, width: w, height:h, transparent: true});

console.log(G.App.renderer.type);

This always prints "1"  for WebGL.  and not "2" for canvas.  Why isn't canvas being used here?  I'm using the latest v5 version of Pixi.js

[Twelve47Kevin]

Nevermind.  The alpha version "v5" doesn't support Canvas.  My bad.

[xerver]

It does, but you need to use the pixi.js-legacy bundle which includes the canvas plugin.

[Twelve47Kevin]

gotcha. thanks

 

[MichalGo]

Hello,

how to set the canvas renderer properly? Even if I have installed pixi.js-legacy or pixi/canvas-renderer and set forceCanvas to true while creating the app, it still have webgl renderer.

[ivan.popelyshev]

It should work. If it doesn't, please post your minimal demo somewhere.

[MichalGo]

Hello Ivan,

I was able to make it work by assigning CanvasRenderer as type to temp variable - then also app renderer has changed but now the error occurs: Uncaught TypeError: displayObject.renderCanvas is not a function

Edited March 10, 2020 by MichalGo

[ivan.popelyshev]

If you work with individual pixi packages you have to be aware about bundles

https://github.com/pixijs/pixi.js/blob/dev/bundles/pixi.js/src/index.js

https://github.com/pixijs/pixi.js/blob/dev/bundles/pixi.js-legacy/src/index.js

You can use only "@pixi/canvas-renderer" if you are ready to write all display scene related functions yourself.

The big problem with ES6 imports/exports is that this approach doesnt care about initialization of dependencies. PixiJS is not a framework, it does not have dependency injection but it uses a few internal dependencies that make it whole. That makes work of library and plugin maintainers hell.

1. People use npm, React and webpack

2. People are convinced that is our problem to deal with the fact that they use webpack.

3. People require extra documentation from us to make their apps work with pixi through treeshaking bundler

And you know what? We are ready to do it, because we love our community! Just not right now, maybe in a year or a few, and only if there will be more people to help us. Its a work in progress at the moment.

Here's a thread about it: 

 

Alternatively: Throw it all out, use vanillaJS and single file we supply in release: https://github.com/pixijs/pixi.js/releases/tag/v5.2.1

[ivan.popelyshev]

Regarding your case - you are doing something wrong. just include "pixi.js-legacy" somewhere , and it should register all renderers in autodetect. Unless you somehow stumbled across a bug with two pixies alive (pixi.js 5.2.0, pixi-legacy 5.2.1 or something like that). In that case, erase node_modules and package.lock and reinstall it.

Edited March 10, 2020 by ivan.popelyshev

[ivan.popelyshev]

If you want help, please share the demo because right now I have no idea what else can be wrong in your case.

 

[MichalGo]

Hello Ivan. I installed pixi.js-legacy and used it while creating the app (PIXI.Application) and set forceCanvas to true and it works now thanks. I have one more question. I use only PIXI.Application from pixi.js-legacy and the rest from pixi.js - is that good or should be changed?

[ivan.popelyshev]

Oh, so it was double-pixi bug! I'm glad we resolved it

It should work, because pixi.js-legacy imports 'pixi.js', its not a separate library

[cloudWalker]

@ivan.popelyshev  Hi, Ivan. I did the things as MichalGo said: only used pixi.js-legacy to create the app(PIXI.Application) and set forceCanvas to true. But then I had an error: TypeError: Cannot redefine property: ticker. and the version of both of pixi.js and pixi.js-legacy are 5.2.4. Also, when I just include "pixi.js-legacy" somewhere, it reminds me the same error. Are there something I miss to use the pixi.js-legacy? I appreciated any advices, and thanks for all the awesome work of pixi.js.

[cloudWalker]

@ivan.popelyshev I just did an experiment about forceCanvas, if I downgrade the version of pixi.js to 5.1.6, and everything works fine