OffscreenCanvas

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⁩.

* Some parts of this feature may have varying levels of support.

Note: This feature is available inWeb Workers.

When using the<canvas> element or theCanvas API, rendering, animation, and user interaction usually happen on the main execution thread of a web application.The computation relating to canvas animations and rendering can have a significant impact on application performance.

TheOffscreenCanvas interface provides a canvas that can be rendered off screen, decoupling the DOM and the Canvas API so that the<canvas> element is no longer entirely dependent on the DOM.Rendering operations can also be run inside aworker context, allowing you to run some tasks in a separate thread and avoid heavy work on the main thread.

OffscreenCanvas is atransferable object.

Constructors

OffscreenCanvas(): OffscreenCanvas constructor. Creates a newOffscreenCanvas object.

Instance properties

OffscreenCanvas.height: The height of the offscreen canvas.
OffscreenCanvas.width: The width of the offscreen canvas.

Instance methods

OffscreenCanvas.getContext(): Returns a drawing context for the offscreen canvas, ornull if the context identifier is not supported, or the offscreen canvas has already been set to a different context mode.
OffscreenCanvas.convertToBlob(): Creates aBlob object representing the image contained in the canvas.
OffscreenCanvas.transferToImageBitmap(): Creates anImageBitmap object from the most recently rendered image of theOffscreenCanvas. See its reference for important notes on managing thisImageBitmap.

Events

Inherits events from its parent,EventTarget.

Listen to these events usingaddEventListener() or by assigning an event listener to theoneventname property of this interface.

contextlost: Fired if the browser detects that anOffscreenCanvasRenderingContext2D context is lost.
contextrestored: Fired if the browser successfully restores anOffscreenCanvasRenderingContext2D context.

Examples

Synchronous display of frames produced by an`OffscreenCanvas`

One way to use theOffscreenCanvas API is to use a rendering context that has been obtained from anOffscreenCanvas object to generate new frames. Once a new frame has finished rendering in this context, thetransferToImageBitmap() method can be called to save the most recent rendered image. This method returns anImageBitmap object, which can be used in a variety of Web APIs and also in a second canvas without creating a transfer copy.

To display theImageBitmap, you can use anImageBitmapRenderingContext context, which can be created by callingcanvas.getContext("bitmaprenderer") on a (visible) canvas element. This context only provides functionality to replace the canvas's contents with the givenImageBitmap. A call toImageBitmapRenderingContext.transferFromImageBitmap() with the previously rendered and savedImageBitmap from the OffscreenCanvas, will display theImageBitmap on the canvas and transfer its ownership to the canvas. A singleOffscreenCanvas may transfer frames into an arbitrary number of otherImageBitmapRenderingContext objects.

Given these two<canvas> elements

html

<canvas></canvas> <canvas></canvas>

the following code will provide the rendering usingOffscreenCanvas as described above.

const one = document.getElementById("one").getContext("bitmaprenderer");const two = document.getElementById("two").getContext("bitmaprenderer");const offscreen = new OffscreenCanvas(256, 256);const gl = offscreen.getContext("webgl");// Perform some drawing for the first canvas using the gl contextconst bitmapOne = offscreen.transferToImageBitmap();one.transferFromImageBitmap(bitmapOne);// Perform some more drawing for the second canvasconst bitmapTwo = offscreen.transferToImageBitmap();two.transferFromImageBitmap(bitmapTwo);

Asynchronous display of frames produced by an`OffscreenCanvas`

Another way to use theOffscreenCanvas API, is to calltransferControlToOffscreen() on a<canvas> element, either on aworker or the main thread, which will return anOffscreenCanvas object from anHTMLCanvasElement object from the main thread. CallinggetContext() will then obtain a rendering context from thatOffscreenCanvas.

Themain.js script (main thread) may look like this:

const htmlCanvas = document.getElementById("canvas");const offscreen = htmlCanvas.transferControlToOffscreen();const worker = new Worker("offscreen-canvas.js");worker.postMessage({ canvas: offscreen }, [offscreen]);

While theoffscreen-canvas.js script (worker thread) can look like this:

onmessage = (evt) => {  const canvas = evt.data.canvas;  const gl = canvas.getContext("webgl");  // Perform some drawing using the gl context};

It's also possible to userequestAnimationFrame() in workers:

onmessage = (evt) => {  const canvas = evt.data.canvas;  const gl = canvas.getContext("webgl");  function render(time) {    // Perform some drawing using the gl context    requestAnimationFrame(render);  }  requestAnimationFrame(render);};

For a full example, see theOffscreenCanvas example source on GitHub or run theOffscreenCanvas example live.