Recently I came across a post that talks about rendering openlayer layers on the offscreencanvas in a web worker (https://openlayers.org/en/latest/examples/offscreen-canvas.html). I would like to adopt this into my project. My plan is first to figure out how the offscreencanvas rendering works and then add the web worker. Right now I am stuck at the first step (rendering layers on offscreencanvas). I tried to follow the pattern in the post but I could not get the layers rendered on the offscreencanvas.

Here's my understanding of the approach used in the post:

1. In the main thread, create a "dummy" layer and add it to the openlayer map. The "render" hook on the "dummy" layer will be executed. It then passes the framestate to the web worker.
2. After receiving the framestate, web worker creates the real layers and renders layers on the offscreencanvas defined in the web worker. Then what is rendered on the offscreencanvas is transferred to a bitmap image. This bitmap image is passed back to the main thread.
3. After receiving the bitmap image, main thread attaches it to the canvas.

I am playing around the offscreencanvas approach on a codesandbox sample.

Here's the codesandbox that contains the correct shapes rendered on canvas: https://codesandbox.io/s/confident-elion-6qzj9?file=/src/index.js

Here's the codesandbox that contains the offscreencanvas approach but the layers are not rendered: https://codesandbox.io/s/mystifying-glitter-4nqn7?file=/src/index.js

I wonder if anyone has experience rendering openlayer layers on offscreencanvas? Any help is greatly appreciated!