Jump to content

Multiple canvases being rendered in my Pixi app


Recommended Posts

I have a strange issue with my canvas elements.

I had been developing a Pixi.js project in isolation, then decided to embed it in my React app. 

I have been able to place the Pixi project within a component and have it compile and build along with the React app from the jump, but when I visit the PIxi game, instead of one canvas being rendered, immediately 2 canvases render. And then if I update the code with this browser open, multiple canvases keep getting added to the dom.

Note: this only happens when I run an 'unoptimized' `npm start`. When I do `serve build`, then only one canvas is rendered-but this build does not allow for me to hot-reload so I cannot develop my app like that. I at least need a build that will allow me to see my progress in real time and not make me restart my server every time.


Any ideas?

Link to comment
Share on other sites

@ivan.popelyshevthank you! yeah I passed these functions from App.js down to their children, and invoke when the games are being rendered: 



However, even though I am still checking to see if the root exists, I still get console errors saying I'm trying to remove an element that isn't present:1764421451_Screenshot2022-11-16at9_41_31AM.thumb.png.bd11afcec4442922c1fbc8c6c87077f4.png

This isn't breaking my app-but would love to do away with console errors if I can.

It's like I'm stuck between a rock and a hard place: I can get rid of the root removal which would give me a clear console, yet multiple canvases

Edited by seanytdawg
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...