GPUCanvasContext

Limited availability

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

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 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.
getConfiguration(): Returns the current configuration set for the context.
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

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

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