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

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
GPUCanvasContext
113Currently supported on ChromeOS, macOS, and Windows only.
113Currently supported on ChromeOS, macOS, and Windows only.
previewCurrently supported on Linux and Windows only.
99Currently supported on ChromeOS, macOS, and Windows only.
 preview 121 No 81 No 25.0 121
canvas
113Currently supported on ChromeOS, macOS, and Windows only.
113Currently supported on ChromeOS, macOS, and Windows only.
previewCurrently supported on Linux and Windows only.
99Currently supported on ChromeOS, macOS, and Windows only.
 preview 121 No 81 No 25.0 121
configure
113["Currently supported on ChromeOS, macOS, and Windows only.", "The rgba8unorm format is currently not supported on macOS. See bug 1298618."]
113["Currently supported on ChromeOS, macOS, and Windows only.", "The rgba8unorm format is currently not supported on macOS. See bug 1298618."]
previewCurrently supported on Linux and Windows only.
99["Currently supported on ChromeOS, macOS, and Windows only.", "The rgba8unorm format is currently not supported on macOS. See bug 1298618."]
 preview 121 No 81 No 25.0 121
getCurrentTexture
113Currently supported on ChromeOS, macOS, and Windows only.
113Currently supported on ChromeOS, macOS, and Windows only.
previewCurrently supported on Linux and Windows only.
99Currently supported on ChromeOS, macOS, and Windows only.
 preview 121 No 81 No 25.0 121
unconfigure
113Currently supported on ChromeOS, macOS, and Windows only.
113Currently supported on ChromeOS, macOS, and Windows only.
previewCurrently supported on Linux and Windows only.
99Currently supported on ChromeOS, macOS, and Windows only.
 preview 121 No 81 No 25.0 121

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/GPUCanvasContext