Canvas not working

const EarthCanvas = () => {
    gl={{preserveDrawingBuffer: true}}
      <Suspense fallback={<CanvasLoader/>}>



export default EarthCanvas

I am trying to import my earth canvas here. But if i get this model, then my previous computer canvas isnt loading. and i get the following warning.

chunk-WSOZJKFA.js?v=26b7929f:17824 WARNING: Too many active WebGL contexts. Oldest context will be lost.

What can I do here? Am I doing something wrong? Please help :frowning:

I think thats because you are making too many canvas, you should give each canvas a separate ID and in the r3f code define the id of each canvas.

browser has an arbitrary limit, you can open x canvas until it crashes the tab. maybe 6, maybe 8 maybe more, or less, it’s up to the browser. i believe that every canvas you open counts against the limit, no matter if it’s closed afterwards.

you have a solution for that in the fiber eco system GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

issue solved! thanks a lot!! :slight_smile: