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.
transferControlToOffscreen()
An OffscreenCanvas object.
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]);
| 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
|
69
|
69
|
No
|
48
|
No
|
10.0
|
HTMLCanvasElement OffscreenCanvasWebGLRenderingContext.commit() © 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/transferControlToOffscreen
| Name | Web APIs |
| Version | |
| Badge |
|
| Last Updated | 2022-04-27T09:33:08Z |