创建超100个WebGL2画布后内容丢失，如何保留画布内容？

问题根源 #

浏览器对WebGL上下文的并发数量有硬性限制（不同浏览器上限一般在15-20左右），当创建的WebGL上下文数量超过上限时，最早创建的上下文会被浏览器强制销毁，导致对应的Canvas显示缺失图像。你之前尝试的loseContext()会主动销毁上下文，删除缓冲区/程序只是释放上下文内的GPU资源，并不会减少上下文的数量配额，所以无法解决问题。

可行解决方案（推荐复用单WebGL上下文） #

核心思路是只创建一个WebGL2上下文，完成绘制后将结果导出到普通Canvas（无需WebGL上下文），以此规避上下文数量限制。具体步骤：

• 创建一个离屏的WebGL Canvas，用于所有绘图操作
• 针对每个需要展示的内容，在这个WebGL上下文里完成绘制
• 将WebGL绘制的内容导出，绘制到普通Canvas中，再将普通Canvas添加到页面

代码示例：

// 创建单个离屏WebGL Canvas
const glCanvas = document.createElement('canvas');
glCanvas.width = 512;
glCanvas.height = 512;
const gl = glCanvas.getContext('webgl2');

// 模拟批量绘制100个Canvas
for (let idx = 0; idx < 100; idx++) {
  // 1. 基于当前任务参数在WebGL中绘图（替换成你的实际绘制逻辑）
  clearGL(gl);
  drawContentToGL(gl, idx);

  // 2. 创建普通Canvas用于保存结果
  const displayCanvas = document.createElement('canvas');
  displayCanvas.width = glCanvas.width;
  displayCanvas.height = glCanvas.height;
  const ctx = displayCanvas.getContext('2d');

  // 3. 将WebGL内容导出到普通Canvas
  ctx.drawImage(glCanvas, 0, 0);

  // 4. 将普通Canvas添加到页面
  document.body.appendChild(displayCanvas);
}

// 辅助函数：清空WebGL画布
function clearGL(gl) {
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

// 辅助函数：实际的WebGL绘制逻辑
function drawContentToGL(gl, idx) {
  // 替换成你自己的着色器、缓冲区、绘制调用逻辑
  // 示例：绘制不同颜色的矩形
  const program = createSimpleProgram(gl);
  gl.useProgram(program);
  const colorLoc = gl.getUniformLocation(program, 'uColor');
  gl.uniform4f(colorLoc, idx % 2, idx % 3 / 3, idx % 4 / 4, 1);
  // 绑定缓冲区、绘制等步骤...
}

如果追求更高性能，推荐使用transferToImageBitmap()替代drawImage()，它是零拷贝操作，适合批量处理：

const imageBitmap = createImageBitmap(glCanvas);
ctx.drawImage(imageBitmap, 0, 0);
imageBitmap.close(); // 用完及时释放资源

需求可行性 #

完全可行。只要避免为每个Canvas创建独立的WebGL上下文，通过复用单上下文+导出图像到普通Canvas的方式，就能轻松实现100+个Canvas保留绘制内容的需求。

不推荐的方案：分组维护上下文 #

如果必须保留WebGL上下文（比如后续需要交互），可以将Canvas分组，每次只保持不超过上限的活跃上下文。但这种方式需要在上下文丢失后重新初始化所有GPU资源（程序、缓冲区、纹理等）并重新绘制，维护成本极高，且用户体验会有延迟，除非有特殊交互需求，否则不建议使用。

内容的提问来源于stack exchange，提问作者arsdever