Canvas Rendering displays black screen on pixi v6

Hi all,

I went forward with migrating my project from v5 to v6. I updated all imports to use individual pixi modules, like import { Application } from @pixi/app. By the way, project is using multiple modules, and is being transpiled from TS to JS and bundled with webpack. After some initial struggles I managed to get the demo perfectly running on WebGL. But when loading the same demo in Canvas (forcing Canvas mode) the renderer doesn’t display anything. Initial issue that I had in Cavas mode, that CanvasRenderer wasn’t initialized, which I was able to fix with import '@pixi/canvas-renderer';. After that change, next issue that I faced was that the stage didn’t had renderCanvas() method. Adding additional import '@pixi/canvas-display'; solved that issue as well. But now I’m at a stage where the demo loads fine, without any issue, but it doesn’t display anything besides black screen. Stage object contains children, so it should display something.

Here’s a small snippet from my demo project:

` import { Application } from ‘@pixi/app’; import { Container } from ‘@pixi/display’; import ‘@pixi/mixin-get-child-by-name’; import ‘@pixi/canvas-renderer’; import ‘@pixi/canvas-display’;

export class PixiApplicationHandler { public app: Application | undefined; private pixelRatio: number;

constructor() {
	this.pixelRatio = this.getPixelRatio();
}

public createApplication(): void {
	const applicationOptions = {
		autoStart: false,
		width: window.innerWidth,
		height: window.innerHeight,
		resolution: this.pixelRatio,
	};
	this.app = new Application(applicationOptions);
	document.body.appendChild(this.app.view);
}

public render(): void {
	if (this.app) {
		this.app.render();
	}
}

`

My question would it be is it possible to fully support Canvas rendering by using individual pixi module imports? If it is, would you have any tip what else would need to be done to make it to show content? Or would I need to go back to classic import of the whole pixi lib?

Thanks

[ivanpopelyshev]

1. Either you use only bundles.
2. Either you read bundles code and make your own.

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

And here how spine works: bundle registers https://github.com/pixijs/spine/blob/2d04c071ed0ea1851f18c09e99d29fb0807ddc0f/bundles/pixi-spine/src/index.ts#L6

If you dont read source code - your options are limited, you have to wait when all the features will be documented. That depends on maintainers time, and on donations.

Now that you know that thing, please make PR to whatever place you want this info to be displayed in the docs.

[mcofko]

Thanks for the replay @ivanpopelyshev . The links you shared are very helpful.

When it comes to the documentation, I was just asking if I missed it anywhere. I’ll dig into the API docs and the source code then.