OffscreenCanvas

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

メモ: この機能はウェブワーカー内で利用可能です。

<canvas> 要素、あるいは Canvas API を使用すると、レンダリングとアニメーション、ユーザー操作は通常、ウェブアプリケーションのメインスレッドの実行で発生します。 キャンバスのアニメーションとレンダリングに関連する計算はアプリケーションのパフォーマンスに影響を受ける場合があります。

OffscreenCanvas インターフェイスは画面外にレンダリングできるキャンバスを提供し、 DOM と Canvas API を切り離すことで、 <canvas> 要素が完全に DOM に依存しなくなります。 レンダリングの操作は ワーカー コンテキストでも実行することができるので、一部のタスクを別のスレッドで実行させて、メインスレッドに負荷の高い処理を回避させることもできます。

OffscreenCanvas移譲可能オブジェクト です。

EventTarget OffscreenCanvas

コンストラクター

OffscreenCanvas()

OffscreenCanvas のコンストラクターです。新しく OffscreenCanvas オブジェクトを生成します。

インスタンスプロパティ

OffscreenCanvas.height

オフスクリーンキャンバスの横幅を示します。

OffscreenCanvas.width

オフスクリーンキャンパスの高さを表します。

メソッド

OffscreenCanvas.getContext()

オフスクリーンキャンバスのコンテキストを返します。

OffscreenCanvas.convertToBlob()

キャンバスに含まれる画像を Blob オブジェクトにして生成します。

OffscreenCanvas.transferToImageBitmap()

OffscreenCanvas で最後にレンダリングされたイメージを ImageBitmap オブジェクトにして生成します。ImageBitmap を管理する上で重要な注意事項については API 説明 からご参照ください。

イベント

親インターフェイスである EventTarget からイベントを継承しています。

これらのイベントを待ち受けするには、 addEventListener() を使用するか、このインターフェイスの oneventname プロパティにイベントリスナーを代入するかしてください。

contextlost

OffscreenCanvasRenderingContext2D コンテキストが失われたことがブラウザーに検出された時に発生します。

contextrestored

ブラウザーが OffscreenCanvasRenderingContext2D コンテキストを正常に復元した時に発生します。

OffscreenCanvas で生成されたフレームを同期的に表示する

OffscreenCanvas を使用する1つの方法は、 OffscreenCanvas オブジェクトからレンダリングコンテキストを使用してフレームを生成することです。このコンテキストで新しいフレームのレンダリングが完了したら、 transferToImageBitmap() メソッドを呼び出すことで、最後にレンダリングされた画像を保存できます。このメソッドは ImageBitmap オブジェクトを返すので、さまざまな Web API で使用できるほか、転送コピーを作成しないでもう一つのキャンバスとして使用することもできます。

ImageBitmap を表示するには ImageBitmapRenderingContext コンテキストを使用します。このコンテキストは canvas.getContext("bitmaprenderer") を (表示されている) canvas 要素で呼び出すことで作成されます。キャンバスの内容を指定された ImageBitmap に置き換える機能のみを提供します。

OffscreenCanvas から以前レンダリングされ保存された ImageBitmap を使用して ImageBitmapRenderingContext.transferFromImageBitmap() を呼び出すと、 ImageBitmap がキャンバス上に表示されて、その所有権がキャンバスに移ります。単体の OffscreenCanvas は任意の数の他の ImageBitmapRenderingContext オブジェクトにフレームを転送することができます。

ここで2つの <canvas> 要素があるとします。

html
<canvas id="one"></canvas> <canvas id="two"></canvas>

次のコードは、上記のように OffscreenCanvas を使用してレンダリングを提供します。

js
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");

// gl コンテキストを使用して最初のキャンバスに描画を行う
const bitmapOne = offscreen.transferToImageBitmap();
one.transferFromImageBitmap(bitmapOne);

// もう一つのキャンバスに対して、さらに描画を行う
const bitmapTwo = offscreen.transferToImageBitmap();
two.transferFromImageBitmap(bitmapTwo);

OffscreenCanvas で生成されたフレームを非同期的に表示する

OffscreenCanvas API を使用するもう一つの方法は、 ワーカー あるいはメインスレッド上の <canvas> 要素で transferControlToOffscreen() を呼び出し、メインスレッドの HTMLCanvasElement から OffscreenCanvas オブジェクトを返すことです。getContext() を呼び出すと、 OffscreenCanvas からレンダリングコンテキストを取得します。

main.js スクリプト (メインスレッド) は次のようになります。

js
const htmlCanvas = document.getElementById("canvas");
const offscreen = htmlCanvas.transferControlToOffscreen();

const worker = new Worker("offscreencanvas.js");
worker.postMessage({ canvas: offscreen }, [offscreen]);

一方で、 offscreencanvas.js スクリプト (ワーカースレッド) は次のようになります。

js
onmessage = (evt) => {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");
  // gl コンテキストを使用して描画を行う
};

ワーカーで requestAnimationFrame() を使うことも可能です。

js
onmessage = (evt) => {
  const canvas = evt.data.canvas;
  const gl = canvas.getContext("webgl");

  function render(time) {
    // gl コンテキストを使用して描画を行う
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
};

より詳細な例については GitHub にある OffscreenCanvas example source を参照するか OffscreenCanvas example live を実行してください。

仕様書

Specification
HTML Standard
# the-offscreencanvas-interface

ブラウザーの互換性

BCD tables only load in the browser

関連情報