JS canvas getContext, а затем TransferControlToOffscreen

Question

Рабочий код:

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

При использовании .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

Дальнейшие попытки также не работают:

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

Или даже так:

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

Ничего не меняется с webgl вместо 2d

Итак, как я могу получить изображение за пределами экрана холста, на котором что-то нарисовано, и затем отправить его работнику? Или я должен использовать что-то вроде getImageData() и отправить результат вместе с закадровым знаком нового холста, и позволить работнику скопировать с putImageData()? Я не хочу делать эти дополнительные операции (потому что будет работать медленнее).

Другим способом было бы использовать cloneNode(), но изображение холста не копировалось.

Я просмотрел все методы canvas и context, но, похоже, ничто не решило проблему.

Я использую FF 67 с включенным экраном. Я полагаю, что нет никакой разницы в Chrome.

Answer 1

Все просто: вы не можете передать управление с холста, имеющего контекст рендеринга.

Но вы можете:

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

То же самое, что и:

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

В конце всех вас transferToImageBitmap:

var bitmap = offscreen.transferToImageBitmap();

Надеюсь, это поможет!