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 insecure contexts (HTTPS), in some or allsupporting browsers.

Note: This feature is available inWeb Workers.

TheGPUCanvasContext interface of theWebGPU API represents the WebGPU rendering context of a<canvas> element, returned via anHTMLCanvasElement.getContext() call with acontextType of"webgpu".

Instance properties

canvasRead 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 givenGPUDevice and clears the canvas to transparent black.
getConfiguration(): Returns the current configuration set for the context.
getCurrentTexture(): Returns the nextGPUTexture 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",});