offscreen-canvas | move Three.js/WebGL/2D canvas | Graphics library

I am attempting to move a Three.js project to TypeScript. When I tried top compile it I would get an error referenced in this issue on the Three.js repo:

https://github.com/mrdoob/three.js/issues/17698

Following those steps I installed @types/offscreencanvas as well as edited my tsconfig.json, but now I get this output when trying to run tsc:

I'm new to web development, so this might be a dumb question. Please let me know if it's already answered:)

According to MDN web docs' page for OffscreenCanvas, currently, the API only supports WebGL context only. (Maybe it just means the worker support for OffscreenCanvas' 2d context is not implemented, but we can still use it on the main thread?)

Note: This API is currently implemented for WebGL1 and WebGL2 contexts only. See bug 801176 for Canvas 2D API support from workers.

But when I read the HTML Specs for OffscreenCanvas, the 2d context is supported.

enum OffscreenRenderingContextType { "2d", "webgl" };

I suspect the second one is only a proposal for what OffscreenCanvas should support, and the first is what is actually supported. Is my understanding correct? If so, how could I know whether a specific browser supports the 2d context for OffscreenCanvas, like Chromium?

What makes me even more confused is people called the regular canvas an offscreenCanvas, and get a 2d context from it (example1, example2). But I think in this case, they are just referring a regular canvas which is not attached to DOM, other than the OffscreenCanvas I like to research on.

(New to OpenGL / Emscripten)

For a stock trading client application I'm building there is the need of 40+ open charts. About 50% of them being in some sort of 'Free draw' state, meaning they show candlesticks plus other lines/arrows/images etc.

After trying a lot of options the last few months, here is what it comes down to.

• HighCharts: Easy but slow;
• CanvasJS: Faster but not fast enough
• WebAssembly + OpenGL: A lot faster, but a lot of work (still worth it)

I bootstrap a single WebAssembly app instance, and call functions on it to let C++ create charts with OpenGL, that maps to WebGL(2). It all works fine.

The reason I go for (WebAssembly + OpenGL) -> Emscripten, is because there is a lot of number crunching, and c++ suits that job fine as well :)

Problem is WebGL has a context limit of about 10 in Chrome(59). So having 40-100 WebGL context (Charts) is not a smart idea, also my guts tell me its a waste of OpenGL resources to have so many context that are almost always output as static images, unless you scroll the chart etc.

Does anyone have good experience with rendering a single OpenGL context to a random canvas element (or any other element, doesn't really matter)?

My thought are as follow:

1. Start c++ OpenGL with an offscreen canvas in another thread, https://github.com/OleksandrChekhovskyi/emscripten-offscreen-canvas-test/blob/master/main.c#L35
2. Javascript tells c++ to render a graph
3. share/render the OpenGL backbuffer with JS through shared Uint8Array... SharedArrayBuffers gets filled by C++ in JS Worker thread and the main (render) thread only reads/transpiles to write image to canvas/html element.

I can't seem of any other way to not create many OpenGL contexts.

Question is: How performant will it be to do it like this, and basically copy over the OpenGL buffer to Javascript etc? It it far off track?

Thanks

p.s. bottom graphs (with red wave line) are now rendered by WebAssembly and OpenGL (GLFW etc)

------ UPDATE -----

Option 2: Always render to same Canvas, and use JS to copy context of canvas to another canvas (but it will probably be erased if the context updates..)