Javascript 处理多个画布上下文的解决方案

我正在构建一个图形web应用程序，在该应用程序中，我将使用一个元素来绘制并最终流式传输其内容

问题是，我打算使用一些需要画布上下文的库（three.js、sketch.js和其他库），在某些情况下还需要不同类型的上下文。其他人需要“2d”上下文，其他人需要“webgl”上下文等

当我希望在最后有一个画布来流式处理画布上绘制的所有这些lib时，如何处理这些lib的可靠方法是什么

现在，我为每个库创建一个隐藏画布，并有一个主渲染循环，我在其中调用：

masterCtx.drawImage(canv1, 0, 0);
masterCtx.drawImage(canv2, 0, 0);
//etc

但后来我可能还有其他需要上下文的lib。我是否应该只有一个画布和一个上下文，并尝试从头开始实现库在那里实现的所有功能？我还有其他选择吗

我的标准是性能、可扩展性和健壮性

---

谢谢

一张画布上不能有两个不同的上下文

解决：

• 多个屏幕外画布，然后将它们绘制到单个可见画布中

• 使用CSS重叠多个屏幕画布
  例如：

---

至于分享画布，我怀疑这是否有效。每个库都希望画布处于特定状态。您可以使用

ctx.save（）

&

ctx.restore（）保存和恢复2d画布的所有状态但是，保存和恢复WebGL的所有状态将是一个巨大的开销。
我认为拥有不同的画布，然后获取所有的上下文并在主画布上画出最终的图像是最好的解决办法。“JonasGrumann，还有其他的方法/问题我应该考虑吗？我不确定，我不是专家。如果你有很多不同的画布，这种方法唯一的缺点就是性能。可能设置一个测试场景，创建100个不同的画布，获取所有画布的上下文，并在一个最终画布上绘制它们，查看结果。我想不出更好的办法了。两张隐藏的画布就够了吗？所有需要
2d
上下文的库共享一个画布。另一个将由所有需要
webgl
上下文的库共享。@geoji我已经想到了这一点，但我认为存在一个问题：每个库都有自己的，有时是复杂的渲染函数。可能很难甚至不可能同步这些。不过我可能错了。