Flutter is great, but we are having real problems working around Flutter randomly creating new WebGL contexts, running out of contexts, and blowing up.

One suggestion was to use virtual WebGL contexts, but those seem to suffer from performance problems on non chrome browsers (#120156).

Another suggestion was implementing the Texture widget (#119649, #37890) to prevent the creation of these additional contexts, but that has been put on hold.

Another suggestion was to expose a helper that can create Image from media elements (#123275) which is probably a good idea to offer, but does still require a lot of internal copying of data around.

Currently, the Flutter web renderer tries to insert the DOM elements between WebGL canvases, which causes it to keep inserting more and more canvases as you embed more HTML elements. But what if this is just a really suboptimal way to approach the problem. Could we not instead have a single WebGL context with a transparent background and pointer events disabled, render all of the DOM shapes behind it, and change the html embed widgets so that they draw by clearing the pixels with transparency so that they show through the canvas (thereby displaying the native DOM nodes behind the canvas), and then have a div behind them where the pointer events for the canvas are captured?

In this way, Flutter web could stick to only ever burning a single WebGL context, would be a lot more efficient at rendering, and people wouldn't have to worry about running out of WebGL contexts when integrating with platform native web content.

Is there a good reason this wouldn't work?