2

I am trying to do below code for transferring canvas to worker:

var mycanvas = document.getElementById('mycanvas');
var offscreenCanvas = mycanvas.transferControlToOffscreen(); // Uncaught InvalidStateError: Failed to execute 'transferControlToOffscreen'
// Code to transfer to worker.js
<div id="divCanvas" style="width:100%;">
    <canvas id="mycanvas"></canvas>
</div>

But When I do below code it does work:

var mycanvas = document.createElement('canvas');
mycanvas.setAttribute("id", "canvasChart1");
document.getElementById('divCanvas').appendChild(mycanvas);
var offscreenCanvas = mycanvas.transferControlToOffscreen();
<div id="divCanvas" style="width:100%;"></div>

What is the difference between both the implementation?
Can we avoid creating canvas at the runtime and use existing?

Kaiido
  • 123,334
  • 13
  • 219
  • 285
User7723337
  • 11,857
  • 27
  • 101
  • 182
  • 1
    Can't repro. Do you have any plugins or other scripts in the page that could try to get a context from the canvas before your script runs? Btw, the error message should tell you more about why it couldn't perform the call (*Cannot transfer control from a canvas for more than one time.* or *Cannot transfer control from a canvas that has a rendering context.*) – Kaiido Sep 08 '20 at 13:35

0 Answers0