OffscreenCanvas

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

The OffscreenCanvas interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts.

Constructors

OffscreenCanvas() (en-US)
OffscreenCanvas constructor. Creates a new OffscreenCanvas object.

Properties

OffscreenCanvas.height (en-US)
The height of the offscreen canvas.
OffscreenCanvas.width (en-US)
The width of the offscreen canvas.

Methods

OffscreenCanvas.getContext()
Returns a rendering context for the offscreen canvas.
OffscreenCanvas.convertToBlob() (en-US)
Creates a Blob object representing the image contained in the canvas.
OffscreenCanvas.transferToImageBitmap() (en-US)
Creates an ImageBitmap (en-US) 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() (en-US) method can be called to save the most recent rendered image. This method returns an ImageBitmap (en-US) 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 (en-US) 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() (en-US) 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() (en-US) 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 Standard
OffscreenCanvas の定義
現行の標準  

Browser compatibility

BCD tables only load in the browser

See also