OffscreenCanvas

コンストラクター

OffscreenCanvas()

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

インスタンスプロパティ

OffscreenCanvas.height

このオフスクリーンキャンバスの高さです。

OffscreenCanvas.width

このオフスクリーンキャンパスの幅です。

メソッド

OffscreenCanvas.getContext()

このオフスクリーンキャンバスの描画コンテキストを返します。コンテキスト識別子が対応していない場合、またはオフスクリーンキャンバスがすでに別のコンテキストモードに設定されている場合は null を返します。

OffscreenCanvas.convertToBlob()

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

OffscreenCanvas.transferToImageBitmap()

OffscreenCanvas で最後にレンダリングされた画像を ImageBitmap オブジェクトにして生成します。管理する上で重要な注意事項についてはリファレンスをして参照ください。

イベント

親インターフェイスである EventTarget から継承したイベントがあります。

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

contextlost

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

contextrestored

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

例

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

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

ImageBitmap を表示するには ImageBitmapRenderingContext コンテキストを使用します。このコンテキストは canvas.getContext("bitmaprenderer") を (表示されている) canvas 要素で呼び出すことで作成されます。キャンバスの内容を指定された ImageBitmap に置き換える機能のみを提供します。オフスクリーンキャンバスから以前レンダリングされ保存された ImageBitmap を使用して ImageBitmapRenderingContext.transferFromImageBitmap() を呼び出すと、 ImageBitmap がキャンバス上に表示されて、その所有権がキャンバスに移ります。単体の OffscreenCanvas は任意の数の他の ImageBitmapRenderingContext オブジェクトにフレームを転送することができます。

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

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

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

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 スクリプト (メインスレッド) は次のようになります。

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

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

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

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

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

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 を実行してください。

仕様書

ブラウザーの互換性

関連情報

• CanvasRenderingContext2D
• OffscreenCanvasRenderingContext2D
• ImageBitmap
• ImageBitmapRenderingContext
• HTMLCanvasElement.transferControlToOffscreen()
• requestAnimationFrame()
• WebGL Off the Main Thread – Mozilla Hacks (2016)