OffscreenCanvas

この記事は翻訳が完了していません。 この記事の翻訳にご協力ください

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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 Standard
OffscreenCanvas の定義
現行の標準  

Browser compatibility

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
OffscreenCanvas
実験的
Chrome 完全対応 69Edge 完全対応 ≤79Firefox 部分対応 44
補足 無効
部分対応 44
補足 無効
補足 See bug 1390089.
無効 From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 69Firefox Android 部分対応 44
補足 無効
部分対応 44
補足 無効
補足 See bug 1390089.
無効 From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0
OffscreenCanvas() constructor
実験的
Chrome 完全対応 69Edge 完全対応 ≤79Firefox 部分対応 46
補足 無効
部分対応 46
補足 無効
補足 See bug 1390089.
無効 From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 69Firefox Android 部分対応 46
補足 無効
部分対応 46
補足 無効
補足 See bug 1390089.
無効 From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 10.0
convertToBlob
実験的
Chrome 完全対応 69Edge 完全対応 ≤79Firefox 部分対応 46
補足 代替名 無効
部分対応 46
補足 代替名 無効
補足 See bug 1390089.
代替名 非標準の名前 toBlob を使用しています。
無効 From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 69Firefox Android 部分対応 46
補足 代替名 無効
部分対応 46
補足 代替名 無効
補足 See bug 1390089.
代替名 非標準の名前 toBlob を使用しています。
無効 From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0
getContext
実験的
Chrome 完全対応 69Edge 完全対応 ≤79Firefox 部分対応 44
補足 無効
部分対応 44
補足 無効
補足 See bug 1390089.
無効 From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 69Firefox Android 部分対応 44
補足 無効
部分対応 44
補足 無効
補足 See bug 1390089.
無効 From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0
height
実験的
Chrome 完全対応 69Edge 完全対応 ≤79Firefox 部分対応 44
補足 無効
部分対応 44
補足 無効
補足 See bug 1390089.
無効 From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 69Firefox Android 部分対応 44
補足 無効
部分対応 44
補足 無効
補足 See bug 1390089.
無効 From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0
transferToImageBitmap
実験的
Chrome 完全対応 69Edge 完全対応 ≤79Firefox 部分対応 46
補足 無効
部分対応 46
補足 無効
補足 See bug 1390089.
無効 From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 69Firefox Android 部分対応 46
補足 無効
部分対応 46
補足 無効
補足 See bug 1390089.
無効 From version 46: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0
width
実験的
Chrome 完全対応 69Edge 完全対応 ≤79Firefox 部分対応 44
補足 無効
部分対応 44
補足 無効
補足 See bug 1390089.
無効 From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 69Firefox Android 部分対応 44
補足 無効
部分対応 44
補足 無効
補足 See bug 1390089.
無効 From version 44: this feature is behind the gfx.offscreencanvas.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

See also