Rendering to canvas in css-grid

[Richard C]

I'm new to pixi.js and struggling to find a solution in the pixi documents.

I want to use a pixi stage on a canvas within a specific cell in css-grid. In fact, I should like to use different pixi effects in a number of cells in the grid which makes the entire web-page. Is this possible?

All examples seem to add a canvas to the body tag which is not what I need obviously.

I have researched previous questions in here but all seem to refer to earlier versions of pixi.js.

A succint answer would be very much appreciated.

Many thanks

Richard C

[ivan.popelyshev]

Hello! I know several projects that focus both on DOM and PixiJS, and its a difficult . First, you have to be aware of limit on WebGL contexts. If you create too many, old ones will break.

I don't entirely understand what do you want, but here is the answer on question that gets posted here *every week*

myAwesomeCanvas = document.createElement('canvas');
const app = new PIXI.Application({
    width: 800, height: 600, view: myAwesomeCanvas
});

//same params as new PIXI.Renderer

I would point you to our docs but it seems the site is down for today due to problems with AWS 

http://pixijs.download/dev/docs/index.html

That option is in param list for "PIXI.Renderer" . 

Sources: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/Renderer.js#L53

Also since it seems that you are going to use multiple canvas or move a canvas around, please read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop , that 'll help you to track all of things that pixi does. The only exception is interaction plugin, it automatically registers when renderer is created and you have to wrestle with "renderer.plugins.interaction" to take control if you need it.

[Richard C]

Hi Ivan

Thanks for the prompt reply.

The web-page is laid out as a responsive grid (css-grid) as per the attached image.

I would like a different pixi canvas in the three grid cells as shown.

Each cell is identified by the usual css case and ID.

Any further help would be appreciated. I don't know hopw to put a canvas/stage in each cell

Many thanks

Richadr C

[botmaster]

Create your HTMLCanvasElement in each cell with their own ids and create as many PIXI.Application as you need and pass along those canvases, that's it. 

Personally I would consider other alternatives, do you really need WebGL in those cells? Is the content of those cells so specific that it requires WebGL?

[ivan.popelyshev]

dont create many applications, thats why I pointed to https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop

I thought that article was enough to answer your question, @Richard C , did you read it once or did you try to reproduce it? Its very important to understanding how pixi works.

Also, canvas can be added to whichever html elements , and im not the master of DOM so i cant help you with grid. Just be sure to resize canvas accordingly cell dimensions.

[Richard C]

Thanks for your replies. I will continue the learning curve.

Richard C

[Exca]

If you have too many canvases so that webgl context amount starts to break, you could use some canvases in 2d context. Also one thing that would need to be kept in mind is that only rerender the contexts that area actually visible / need rerendering, that way you can keep the performance hit at minimum. Custom application/render loop is something that you need in any case, as pointed out already by Ivan.