canvas-test | 🎮 happy canvas | Canvas library

I have an HTML/JavaScript SPA and I want to check whether Offscreen canvas is supported by the Browser or not.

I tried with

Im having some trouble displaying vue components containing a canvas with different behaviors.

I want to be able to "switch component" using v-if and passing different properties.

i made a small example, see code below:

What happens now is that when i switch to 'blue' then 'red' is still "living" so when i draw the color is still 'red', although i can see the dom is changing and switching to 'canvas2'

--- COMPONENT------

(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..)