HTMLCanvasElement: transferControlToOffscreen() method

{{APIRef("Canvas API")}}

The HTMLCanvasElement.transferControlToOffscreen() method transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.

Syntax

transferControlToOffscreen()

Parameters

None.

Return value

An {{domxref("OffscreenCanvas")}} object.

Exceptions

• InvalidStateError {{domxref("DOMException")}}
  • : Throws if:
    • the canvas has been set a context mode by calling {{domxref("HTMLCanvasElement.getContext()")}}
    • the canvas has already transferred its control to offscreen.

Examples

The following example shows how to transfer control to an {{domxref("OffscreenCanvas")}} object on the main thread.

const htmlCanvas = document.createElement("canvas");
const offscreen = htmlCanvas.transferControlToOffscreen();
const gl = offscreen.getContext("webgl");

// Some drawing using the gl context…

The following example shows how to transfer control to an {{domxref("OffscreenCanvas")}} object on a worker.

const offscreen = document.querySelector("canvas").transferControlToOffscreen();
const worker = new Worker("my-worker-url.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• The interface defining this method, {{domxref("HTMLCanvasElement")}}
• {{domxref("OffscreenCanvas")}}