HTMLCanvasElement.transferControlToOffscreen()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Syntax

OffscreenCanvas HTMLCanvasElement.transferControlToOffscreen()

Return value

An OffscreenCanvas object.

Examples

The following example shows how to transfer control to an 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 ...

// Push frames back to the original HTMLCanvasElement
gl.commit();

The following example shows how to transfer control to an OffscreenCanvas object on a worker.

const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('myworkerurl.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);

Specifications

Specification
HTML Standard (HTML) # dom-canvas-transfercontroltooffscreen-dev

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`transferControlToOffscreen`	69	79	44	No	56	No	No	69	44	48	No	10.0