We are facing the following challenge: We are creating a behavioral experimentation library, which both needs to be able to show random shapes as well as display forms. For the shape drawing part we use pixi.js, and even though we know it can also use canvas2D, we prefer it to use WebGL as its rendering engine, which uses the 3D context of the canvas. Pixi however doesn't really have the ability to draw form elements on the canvas, so we decided to use Zebra/Zebkit for this, but zebra can only draw to 2d context.
According to many sources, it's impossible to use 2D and 3D context simultaneously with a single canvas, or switch from 2D and 3D context (and vice versa) after the canvas has been initialized. We therefore decided to create 2 separate canvases, one with a 3D context to use with Pixi.js, and one with a 2D context to use with Zebra/zebkit. When necessary, we switch the canvases by showing one and hiding the other.
This works quite well when the canvases are integrated in the web page, but less optimal when we want to display the experiment fullscreen. It is very difficult to switch from one canvas to the other in fullscreen, because you can only choose one DOM element at the time to be displayed full screen, and weird stuff happens when you start hiding the full screen element to show another. My question is: what would be the best approach to tackle this problem? I already have several in mind:
Put both canvases in a container div, and display this container fullscreen instead of the canvases itself. I don't know if this is possible, or if this will have any negative side effects compared to showing a canvas in fullscreen directly.
Render the zebkit canvas on top of the pixi canvas by making sure it is on top of the overlay item, as suggested in How do I make a DIV visible on top of an HTML5 fullscreen video?. This situation seems very hacky though, and I smell inconsistency issues between the various browsers that are around already.
Use the method described in How do I make a DIV visible on top of an HTML5 fullscreen video? to render normal HTML form elements on the pixi canvas. I predict there will be some resolution/rendering problems to tackle though, because you don't have the degree of control over the pixel raster as you have with canvas items.
