This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
The OffscreenCanvas
interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts.
Constructors
OffscreenCanvas()
OffscreenCanvas
constructor. Creates a newOffscreenCanvas
object.
Properties
OffscreenCanvas.height
- The height of the offscreen canvas.
OffscreenCanvas.width
- The width of the offscreen canvas.
Methods
OffscreenCanvas.getContext()
- Returns a rendering context for the offscreen canvas.
OffscreenCanvas.convertToBlob()
- Creates a
Blob
object representing the image contained in the canvas.
OffscreenCanvas.transferToImageBitmap()
- Creates an
ImageBitmap
object from the most recently rendered image of theOffscreenCanvas
.
Examples
Synchronous display of frames produced by an OffscreenCanvas
One way to use the OffscreenCanvas
API, is to use a RenderingContext
that has been obtained from an OffscreenCanvas
object to generate new frames. Once a new frame has finished rendering in this context, the transferToImageBitmap()
method can be called to save the most recent rendered image. This method returns an ImageBitmap
object, which can be used in a variety of Web APIs and also in a second canvas without creating a transfer copy.
To display the ImageBitmap
, you can use a ImageBitmapRenderingContext
context, which can be created by calling canvas.getContext("bitmaprenderer")
on a (visible) canvas element. This context only provides functionality to replace the canvas's contents with the given ImageBitmap
. A call to ImageBitmapRenderingContext.transferFromImageBitmap()
with the previously rendered and saved ImageBitmap
from the OffscreenCanvas, will display the ImageBitmap
on the canvas and transfer its ownership to the canvas. A single OffscreenCanvas
may transfer frames into an arbitrary number of other ImageBitmapRenderingContext
objects.
Given these two <canvas>
elements
<canvas id="one"></canvas>
<canvas id="two"></canvas>
the following code will provide the rendering using an OffscreenCanvas
as described above.
var one = document.getElementById("one").getContext("bitmaprenderer");
var two = document.getElementById("two").getContext("bitmaprenderer");
var offscreen = new OffscreenCanvas(256, 256);
var gl = offscreen.getContext('webgl');
// ... some drawing for the first canvas using the gl context ...
// Commit rendering to the first canvas
var bitmapOne = offscreen.transferToImageBitmap();
one.transferFromImageBitmap(bitmapOne);
// ... some more drawing for the second canvas using the gl context ...
// Commit rendering to the second canvas
var bitmapTwo = offscreen.transferToImageBitmap();
two.transferFromImageBitmap(bitmapTwo);
Asynchronous display of frames produced by an OffscreenCanvas
Another way to use the OffscreenCanvas
API, is to call transferControlToOffscreen()
on a <canvas>
element, either on a worker or the main thread, which will return an OffscreenCanvas
object from an HTMLCanvasElement
object from the main thread. Calling getContext()
will then obtain a RenderingContext
from that OffscreenCanvas
.
main.js (main thread code):
var htmlCanvas = document.getElementById("canvas");
var offscreen = htmlCanvas.transferControlToOffscreen();
var worker = new Worker("offscreencanvas.js");
worker.postMessage({canvas: offscreen}, [offscreen]);
offscreencanvas.js (worker code):
onmessage = function(evt) {
var canvas = evt.data.canvas;
var gl = canvas.getContext("webgl");
// ... some drawing using the gl context ...
};
You can also use requestAnimationFrame in workers
onmessage = function(evt) {
const canvas = evt.data.canvas;
const gl = canvas.getContext("webgl");
function render(time) {
// ... some drawing using the gl context ...
requestAnimationFrame(render);
}
requestAnimationFrame(render);
};
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'OffscreenCanvas' in that specification. | Living Standard |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 69 |
Edge
Full support ≤79 |
Firefox Partial support 44 Partial support 44 Notes' See bug 1390089.
Disabled' From version 44: this feature is behind the |
IE
No support No |
Opera
Full support 56 |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 69 |
Firefox Android Partial support 44 Partial support 44 Notes' See bug 1390089.
Disabled' From version 44: this feature is behind the |
Opera Android
Full support 48 |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 |
Chrome
Full support 69 |
Edge
Full support ≤79 |
Firefox Partial support 46 Partial support 46 Notes' See bug 1390089.
Disabled' From version 46: this feature is behind the |
IE
No support No |
Opera
Full support 56 |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 69 |
Firefox Android Partial support 46 Partial support 46 Notes' See bug 1390089.
Disabled' From version 46: this feature is behind the |
Opera Android
Full support Yes |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 | |
Chrome
Full support 69 |
Edge
Full support ≤79 |
Firefox Partial support 46 Partial support 46 Notes' See bug 1390089.
Alternate Name' Uses the non-standard name: |
IE
No support No |
Opera
Full support 56 |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 69 |
Firefox Android Partial support 46 Partial support 46 Notes' See bug 1390089.
Alternate Name' Uses the non-standard name: |
Opera Android
Full support 48 |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 | |
Chrome
Full support 69 |
Edge
Full support ≤79 |
Firefox Partial support 44 Partial support 44 Notes' See bug 1390089.
Disabled' From version 44: this feature is behind the |
IE
No support No |
Opera
Full support 56 |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 69 |
Firefox Android Partial support 44 Partial support 44 Notes' See bug 1390089.
Disabled' From version 44: this feature is behind the |
Opera Android
Full support 48 |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 | |
Chrome
Full support 69 |
Edge
Full support ≤79 |
Firefox Partial support 44 Partial support 44 Notes' See bug 1390089.
Disabled' From version 44: this feature is behind the |
IE
No support No |
Opera
Full support 56 |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 69 |
Firefox Android Partial support 44 Partial support 44 Notes' See bug 1390089.
Disabled' From version 44: this feature is behind the |
Opera Android
Full support 48 |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 | |
Chrome
Full support 69 |
Edge
Full support ≤79 |
Firefox Partial support 46 Partial support 46 Notes' See bug 1390089.
Disabled' From version 46: this feature is behind the |
IE
No support No |
Opera
Full support 56 |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 69 |
Firefox Android Partial support 46 Partial support 46 Notes' See bug 1390089.
Disabled' From version 46: this feature is behind the |
Opera Android
Full support 48 |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 | |
Chrome
Full support 69 |
Edge
Full support ≤79 |
Firefox Partial support 44 Partial support 44 Notes' See bug 1390089.
Disabled' From version 44: this feature is behind the |
IE
No support No |
Opera
Full support 56 |
Safari
No support No |
WebView Android
No support No |
Chrome Android
Full support 69 |
Firefox Android Partial support 44 Partial support 44 Notes' See bug 1390089.
Disabled' From version 44: this feature is behind the |
Opera Android
Full support 48 |
Safari iOS
No support No |
Samsung Internet Android
Full support 10.0 |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
- Uses a non-standard name.'
- Uses a non-standard name.
See also
- WebGL Off the Main Thread – Mozilla Hacks
CanvasRenderingContext2D
ImageBitmap
ImageBitmapRenderingContext
HTMLCanvasElement.transferControlToOffscreen()
WebGLRenderingContext.commit()
OffscreenCanvas by Mozilla Contributors is licensed under CC-BY-SA 2.5.