Web Canvas: Allow initialization with HTMLCanvasElement and OffscreenCanvas

[zubiden]

As of version 1.0.0, the only way to initialize TVG.Canvas is to have a canvas with a unique ID (or selector path) in the DOM tree. This makes it impossible to use it within a WebWorker or to provide OffscreenCanvas.

This can be resolved by enabling initialization using a canvas element or an OffscreenCanvas instance.

For the time being, I think this limitation can be worked around by using a software renderer and receiving frames as an ArrayBuffer. I plan to explore this possibility and will send a pull request. Some slight architectural changes are required for WebGL and WebGPU.

If you would like this feature added, please leave a reaction or a comment explaining your needs.

[zubiden]

I'm not very familiar with Emscripten, so this exploration is based on reading documentation and some code.

Currently, ThorVG uses the emscripten_webgl_create_context() function to create a WebGL context. This function accepts a selector string. There seems to be a hacky way to register context with an undocumented Module.GL object, get a context reference and use it on the C++ side.

However, there is no such object for a WebGPU context. Instead, there is a special Module.canvas object that can be accessed by using the "!canvas" selector. It probably would work for WebGL too. The main problem with this approach is that it is highly likely to be read only when the module is initialized. Even if it can be changed at runtime, there's a risk of race conditions if several instances try to access it simultaneously.

The Module.canvas approach looks promising, but it requires more code digging and experimentation. The fact that it is barely documented could cause problems with long-term support.