0

I'm trying to run multiple instances of my web worker. But I'm getting the following error in browser console :

core.js:4081 ERROR DOMException: Failed to execute 'postMessage' on 'Worker': An OffscreenCanvas could not be cloned because it was detached.

Here is the Angular code :

let htmlCanvas = <HTMLCanvasElement> document.getElementById("canvas");
let offscreen = htmlCanvas.transferControlToOffscreen();
for(let i = 1; i < 10; i++){
  let _worker = new Worker("./my-worker.worker", { type: 'module' }); 
  _worker.onmessage = ({ data }) => {
      console.log(data);
  };
  _worker.postMessage({canvas: offscreen, x_max : i * 100}, [offscreen]);
}

The loop stops at second iteration with the above error in browser console.

iJade
  • 23,144
  • 56
  • 154
  • 243
  • @mbojko no it doesn't. I'm trying to run multiple instances of the web workers to reduce the load but there as you can see it's a single instance of web worker. – iJade Jul 04 '20 at 12:38
  • 1
    Ten workers working on _the same_ OffscreenCanvas? I don't think that's possible. The very purpose of workers is to be independent and communicate by messages, not to work on shared real estate like canvas. – mbojko Jul 04 '20 at 12:48
  • 1
    Once an object has been detached (e.g because it's been transferred) its previous pointer doesn't point to the object anymore, and thus you can't do anything from there. The message is very clear, you can't clone an OffscreenCanvas that has already been detached. The answer there says it even more clearly, "You should send OffscreenCanvas to worker only once" -> to any worker, not only to the same. – Kaiido Jul 04 '20 at 14:18

0 Answers0