A WebGPU canvas context must be configured with a device and the device's preferred texture format before drawing

After obtaining a GPUDevice, connect it to a canvas element by calling canvas.getContext('webgpu') then context.configure({ device, format }). The format field specifies the pixel format for canvas textures. Passing navigator.gpu.getPreferredCanvasFormat() is almost always correct — it returns the format the device handles most efficiently; using a non-preferred format can cause silent extra memory copies per frame. The configured context then supplies textures for render passes via context.getCurrentTexture().

Examples

const context = canvas.getContext('webgpu');
const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({ device, format: canvasFormat });

Assessment

What happens if you configure the canvas context with a format that doesn’t match getPreferredCanvasFormat()? Write the three lines needed to configure a WebGPU canvas context.