Canvas Design

Overview

Create performant, accessible, and visually compelling graphics using HTML Canvas 2D, SVG, and data visualization libraries. This skill covers everything from low-level pixel manipulation to high-level chart composition with D3.js, including generative art, interactive graphics, and animation.

Phase 1: Requirements Analysis

1. Determine output type (static, animated, interactive, data-driven)
2. Choose rendering technology (Canvas 2D, SVG, WebGL, hybrid)
3. Identify data sources and update frequency
4. Define accessibility requirements for the visualization
5. Set performance budget (frame rate, element count)

STOP — Present technology recommendation with rationale before implementation.

Technology Selection Decision Table