GPUCanvasContext

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

WebGPU APIGPUCanvasContext インターフェイスは、contextType"webgpu" にして呼び出した HTMLCanvasElement.getContext() から返される、<canvas> 要素の WebGPU レンダリングコンテキストを表します。

インスタンスプロパティ

canvas Experimental 読取専用

このコンテキストの作成元であるキャンバスへの参照を返します。

インスタンスメソッド

configure() Experimental

指定の GPUDevice でレンダリングを行う用にコンテキストを設定し、キャンバスを透明な黒に初期化します。

getCurrentTexture() Experimental

このキャンバスコンテキストによって文書に次に合成される GPUTexture を返します。

unconfigure() Experimental

これまでのコンテキスト設定をすべて消去し、キャンバスコンテキストが設定されていた間に作成されたテクスチャをすべて破棄します。

js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});

仕様書

Specification
WebGPU
# gpucanvascontext

ブラウザーの互換性

BCD tables only load in the browser

関連情報