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

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

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

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

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

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

一方で、 offscreencanvas.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)