JS canvas getContext then transferControlToOffscreen

Question

Working code:

var canvas = document.createElement('canvas');
var offscreen = canvas.transferControlToOffscreen();

When using .getContext():

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var offscreen = canvas.transferControlToOffscreen();
// InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Further attempts do not work either:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
delete ctx;
var offscreen = canvas.transferControlToOffscreen();

Or even so:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.reset();
delete ctx;
var offscreen = canvas.transferControlToOffscreen();

Nothing changes with webgl instead of 2d

So, how can i get the offscreen of a canvas which has something drawn on it, and then send it to a worker? Or must i use something like getImageData() and send the result alongside the offscreen of a brand new canvas, and let the worker copy with putImageData()? I do not want to make these additional operations (because will run slower).

Another way would have been to use cloneNode(), but the canvas image does not get copied.

Ive looked trough all methods of canvas and of context, but nothing seems to fix the problem.

I am using FF 67 with offscreen enabled. I suppose there is no difference in Chrome.

Answer 1

It's simple: You cannot transfer control from a canvas that has a rendering context.

But you can:

const canvas = new OffscreenCanvas(100, 1);
const ctx = canvas.getContext('2d');

Wich is the same as doing:

var canvas = document.createElement('canvas');
var offscreen = canvas.transferControlToOffscreen();
var ctx = offscreen.getContext('2d');

At the end of all you transferToImageBitmap:

var bitmap = offscreen.transferToImageBitmap();

Hope this helps!