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
は 移譲可能オブジェクト です。
コンストラクター
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>
要素があるとします。
<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("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 を実行してください。
仕様書
Specification |
---|
HTML Standard # the-offscreencanvas-interface |
ブラウザーの互換性
BCD tables only load in the browser