#WebGPUCanvasContext

The wrapper returned by CK.MakeGPUCanvasContext. It owns the swapchain configuration for a <canvas> and exposes a tiny convenience: requestAnimationFrame(drawFrame) builds a fresh Surface over the next swapchain texture, hands you a Canvas, and flushes / destroys the surface for you when the callback returns.

// device: GPUDevice from navigator.gpu.requestAdapter().requestDevice()
const deviceCtx = CK.MakeGPUDeviceContext(device);
const canvasCtx = CK.MakeGPUCanvasContext(deviceCtx, canvasEl, { format: 'bgra8unorm' });

function frame() {
  canvasCtx.requestAnimationFrame((canvas) => {
    canvas.clear(CK.WHITE);
    canvas.drawCircle(100, 100, 50, paint);
    // No need to call surface.flush — the wrapper handles it.
    // Recurse for animation:
    frame();
  });
}
frame();

The callback's canvas is the only thing you can interact with — there's no surface exposed directly. Each frame the swapchain advances; the previous frame's offscreen surface is destroyed.

#Members

#See also

• WebGPUCanvasOptions — config for MakeGPUCanvasContext.
• CanvasKit.MakeGPUCanvasContext, MakeGPUCanvasSurface — alternative that returns a regular Surface.
• GrDirectContext — MakeGPUDeviceContext returns one of these.