Jump to content

Too many active contexts


Recommended Posts

Noob question. I have a 100 individual components and I need to draw fill a vertical rectangle every 30ms in each component so I tried to use a canvas for the rectangle and then use webgl to render using pixi. The browser complains max 16 web context. I've found that chrome only allows 16 and then decided that was the wrong way to do it. 

What I want to do is have 1 larger hidden context then render all the rectangles at on offset to the hidden context. Then can I slice out each rectangle and apply it on a 1 to 1 basis to a canvas. This means I only have to use 1 context to render each canvas. 

How can I achieve this or is there a better way.


Thanks in advance

Link to comment
Share on other sites

I tried that it eats CPU. Rendering with canvas rendering uses tones of CPU and GPU where as using webgl on 16 contexts keeps the usage low. I was going to try 1 context and split it over all the rectangles and test the performance. I just didn't know the best way to use 1 context for many canvases 


Thanks for your response

Link to comment
Share on other sites

I just use the webgl canvas or the canvas renderer by the boolean flag in the autoDetectRenederer. with webgl it dramatically reduces the CPU and uses the GPU. with canvas both the  CPU and GPU are higher. The CPU is too high with canvas.


const meters = {};

function drawMeter(canvas, key, level, peak) {
   if (!meters[key]) {
      const container = new PIXI.Container();
      const renderer = new PIXI.autoDetectRenderer(canvas.width, canvas.height, { view: canvas });
      const graphics = new PIXI.Graphics();

      meters[key] = {
         container: container,
         renderer: renderer,
         graphics: graphics

   meters[key].graphics.drawRect(0, 0, canvas.width, canvas.height * Math.random());



Am I doing something wrong?



Link to comment
Share on other sites

I have attached a picture.

every cell is its own component the vertical rectangle can be drawn at different heights every 30mS. I have more that 16 of these components so I cant use a webgl context for each because you are only allowed 16. I can use a canvas for each but the CPU usage is very high. Could I use just 1 webgl context and some how map a slice of that context to the correct canvas


Thanks sorry if Im not making any sense


Link to comment
Share on other sites

yes and then overlay my meters over the top. it would work for that example.

What I want to try and do is this. looking at the picture I have provided. the top canvas is 1 canvas painting using webgl. it has 2 different colour bars bouncing up and down. underneath I have 2 other canvases. I want the first 1 underneath to show the red bar from the top canvas context and the  2nd to show the blue. both should be eith done bu scissoring or setting a viewport or however this can be achieved. Do you know how to do that?


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...