GPUCanvasContext

Limited availability

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

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.

Note: This feature is available in Web Workers.

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 Experimental Read only: Returns a reference to the canvas that the context was created from.

Instance methods

configure() Experimental: Configures the context to use for rendering with a given GPUDevice and clears the canvas to transparent black.
getConfiguration() Experimental: Returns the current configuration set for the context.
getCurrentTexture() Experimental: Returns the next GPUTexture to be composited to the document by the canvas context.
unconfigure() Experimental: Removes any previously-set context configuration, and destroys any textures produced while the canvas context was configured.

Examples

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