JavaScript failed to execute "transferControlToOffscreen"

Question

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?