Jump to content

Rendering to canvas in css-grid

Richard C

Recommended Posts

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

Link to comment
Share on other sites

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 :(


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.

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...