HTMLCanvasElement: transferControlToOffscreen() method
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
The HTMLCanvasElement.transferControlToOffscreen() method transfers control to an OffscreenCanvas object, either on the main thread or on a worker.
Syntax
js
transferControlToOffscreen()
Parameters
None.
Return value
An OffscreenCanvas object.
Exceptions
InvalidStateErrorDOMException-
Throws if:
- the canvas has been set a context mode by calling
HTMLCanvasElement.getContext() - the canvas has already transferred its control to offscreen.
- the canvas has been set a context mode by calling
Examples
The following example shows how to transfer control to an OffscreenCanvas object on the main thread.
js
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 OffscreenCanvas object on a worker.
js
const offscreen = document.querySelector("canvas").transferControlToOffscreen();
const worker = new Worker("my-worker-url.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);
Specifications
| Specification |
|---|
| HTML # dom-canvas-transfercontroltooffscreen-dev |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
transferControlToOffscreen
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
See also
- The interface defining this method,
HTMLCanvasElement OffscreenCanvas