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
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 given
GPUDeviceand clears the canvas to transparent black. getConfiguration()-
Returns the current configuration set for the context.
getCurrentTexture()-
Returns the next
GPUTextureto 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,
format: navigator.gpu.getPreferredCanvasFormat(),
alphaMode: "premultiplied",
});
Specifications
| Specification |
|---|
| WebGPU # gpucanvascontext |
Browser compatibility
| desktop | mobile | server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
GPUCanvasContext
|
|
|
|
|
|
|
|
|
|
|
|
|
|
canvas
|
|
|
|
|
|
|
|
|
|
|
|
|
|
configure
|
|
|
|
|
|
|
|
|
|
|
|
|
|
toneMapping config property
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getConfiguration
|
|
|
|
|
|
|
|
|
|
|
|
|
|
getCurrentTexture
|
|
|
|
|
|
|
|
|
|
|
|
|
|
unconfigure
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
See also
- The WebGPU API