Web/API/OffscreenCanvas

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 new OffscreenCanvas 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 the OffscreenCanvas.

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

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`OffscreenCanvas` Experimental'	Chrome Full support 69	Edge Full support ≤79	Firefox Partial support 44 Notes' Disabled' Partial support 44 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 44: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	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 Notes' Disabled' Partial support 44 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 44: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	Opera Android Full support 48	Safari iOS No support No	Samsung Internet Android Full support 10.0
`OffscreenCanvas()` constructor Experimental'	Chrome Full support 69	Edge Full support ≤79	Firefox Partial support 46 Notes' Disabled' Partial support 46 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 46: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	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 Notes' Disabled' Partial support 46 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 46: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	Opera Android Full support Yes	Safari iOS No support No	Samsung Internet Android Full support 10.0
`convertToBlob` Experimental'	Chrome Full support 69	Edge Full support ≤79	Firefox Partial support 46 Notes' Alternate Name' Disabled' Partial support 46 Notes' Alternate Name' Disabled' Notes' See bug 1390089. Alternate Name' Uses the non-standard name: `toBlob` Disabled' From version 46: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	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 Notes' Alternate Name' Disabled' Partial support 46 Notes' Alternate Name' Disabled' Notes' See bug 1390089. Alternate Name' Uses the non-standard name: `toBlob` Disabled' From version 46: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	Opera Android Full support 48	Safari iOS No support No	Samsung Internet Android Full support 10.0
`getContext` Experimental'	Chrome Full support 69	Edge Full support ≤79	Firefox Partial support 44 Notes' Disabled' Partial support 44 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 44: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	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 Notes' Disabled' Partial support 44 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 44: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	Opera Android Full support 48	Safari iOS No support No	Samsung Internet Android Full support 10.0
`height` Experimental'	Chrome Full support 69	Edge Full support ≤79	Firefox Partial support 44 Notes' Disabled' Partial support 44 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 44: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	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 Notes' Disabled' Partial support 44 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 44: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	Opera Android Full support 48	Safari iOS No support No	Samsung Internet Android Full support 10.0
`transferToImageBitmap` Experimental'	Chrome Full support 69	Edge Full support ≤79	Firefox Partial support 46 Notes' Disabled' Partial support 46 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 46: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	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 Notes' Disabled' Partial support 46 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 46: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	Opera Android Full support 48	Safari iOS No support No	Samsung Internet Android Full support 10.0
`width` Experimental'	Chrome Full support 69	Edge Full support ≤79	Firefox Partial support 44 Notes' Disabled' Partial support 44 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 44: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	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 Notes' Disabled' Partial support 44 Notes' Disabled' Notes' See bug 1390089. Disabled' From version 44: this feature is behind the `gfx.offscreencanvas.enabled` preference. To change preferences in Firefox, visit about:config.	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.

Web/API/OffscreenCanvas

Contents

Constructors

Properties

Methods

Examples

Synchronous display of frames produced by an `OffscreenCanvas`

Asynchronous display of frames produced by an `OffscreenCanvas`

Specifications

Browser compatibility

Legend

See also

Web/API/OffscreenCanvas

Constructors

Properties

Methods

Examples

Synchronous display of frames produced by an OffscreenCanvas

Asynchronous display of frames produced by an OffscreenCanvas

Specifications

Browser compatibility

Legend

See also

Synchronous display of frames produced by an `OffscreenCanvas`

Asynchronous display of frames produced by an `OffscreenCanvas`