我们面临以下挑战：我们正在创建一个行为实验库，它既需要能够显示随机形状，也需要显示形式。对于形状绘制部分，我们使用pixi.js，尽管我们知道它也可以使用 canvas2D，但我们更喜欢它使用 WebGL 作为其渲染引擎，它使用画布的 3D 上下文。然而 Pixi 并没有在画布上绘制表单元素的能力，所以我们决定使用Zebra/Zebkit，但 zebra 只能绘制到 2d 上下文。
根据许多消息来源，不可能在单个画布上同时使用 2D 和 3D 上下文，或者在画布初始化后从 2D 和 3D 上下文切换（反之亦然）。因此，我们决定创建 2 个单独的画布，一个具有 3D 上下文以用于 Pixi.js，另一个具有 2D 上下文以用于 Zebra/zebkit。必要时，我们通过显示一个和隐藏另一个来切换画布。
当画布集成在网页中时，这非常有效，但当我们想要全屏显示实验时，效果就不那么理想了。在全屏模式下从一个画布切换到另一个画布非常困难，因为您当时只能选择一个 DOM 元素全屏显示，而当您开始隐藏全屏元素以显示另一个时会发生奇怪的事情。我的问题是：解决这个问题的最佳方法是什么？我已经想到了几个：
将两个画布放在一个容器 div 中，并全屏显示此容器而不是画布本身。我不知道这是否可能，或者与直接全屏显示画布相比，这是否会产生任何负面影响。
按照如何使 DIV 在 HTML5 全屏视频的顶部可见？. 不过，这种情况似乎很棘手，而且我闻到了已经存在的各种浏览器之间的不一致问题。
使用如何使 DIV 在 HTML5 全屏视频上可见？在 pixi 画布上呈现普通的 HTML 表单元素。我预测会有一些分辨率/渲染问题需要解决，因为您无法像使用画布项目那样控制像素栅格。