An OffscreenCanvas could not be cloned because it was not transferred

[wujekbogdan]

I'm trying to workerize the lottie.js rendering passing an OffscreenCanvas object through postMessage but I'm getting the following error:

Failed to execute 'postMessage' on 'Worker': An OffscreenCanvas could not be cloned because it was not transferred.

Is it a bug in worker-plugin?

[GMartigny]

I'm not related to this project, but I tried the same thing with native Javascript worker (without webpack) and complexe object like class instance can't be transferred. Think of each message as a JSON. You can pass the ImageData with worker.postMessage(context.getImageData(0, 0, width height)) because it's an array-like structure.

[developit]

In order to pass the canvas context to your worker, you need to define it in the transfer list when calling postMessage:

worker.postMessage(
    canvasContext, // your data
    [canvasContext] // transfer list
);

Closing since this isn't related to Worker Plugin but I'm actually quite interested to hear how your Lottie stuff is going. Feel free to ping me on Twitter about it!

[wujekbogdan]

In order to pass the canvas context to your worker, you need to define it in the transfer list when calling postMessage:

Thanks for the tip.

(...) but I'm actually quite interested to hear how your Lottie stuff is going.

Using Offscreen Canvas wasn't a good idea because of very poor browsers support. I didn't know about it when writing this post.

I tried a different approach, here's the topic where I post more details: https://github.com/airbnb/lottie-web/issues/1860

Unfortunately at the moment, it seems that it's not possible to offload Lottie initialization to a WebWorker thread because of too many DOM/window/document dependencies.