GPUCanvasContext

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The GPUCanvasContext interface of the WebGPU API represents the WebGPU rendering context of a <canvas> element, returned via an HTMLCanvasElement.getContext() call with a contextType of "webgpu".

Instance properties

canvas Read only

Returns a reference to the canvas that the context was created from.

Instance methods

configure()

Configures the context to use for rendering with a given GPUDevice and clears the canvas to transparent black.

getCurrentTexture()

Returns the next GPUTexture to be composited to the document by the canvas context.

unconfigure()

Removes any previously-set context configuration, and destroys any textures produced while the canvas context was configured.

Examples

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

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

Specifications

Specification
WebGPU
# gpucanvascontext

Browser compatibility

BCD tables only load in the browser

See also