webgpu-syntax-canvas-context

What problem does it solve?

This Skill prevents common WebGPU canvas failures such as black frames from stale swap-chain textures and blurry output from CSS-only resizing.

Core Features & Use Cases

• Canvas setup: Configure a GPU canvas context with the platform-preferred presentation format and correct alpha mode.
• Per-frame presentation: Acquire a fresh current texture and render into it on every frame.
• Responsive resizing: Use ResizeObserver and device-pixel dimensions so the canvas stays sharp across display sizes.
• Use case: Build a responsive WebGPU renderer that can present opaque scenes, transparent overlays, and resized fullscreen canvases without validation errors.

Quick Start

Use the webgpu-syntax-canvas-context skill to configure your WebGPU canvas, choose the correct canvas format and alpha mode, and implement a resize-safe frame loop.