总览与学习路径
这一章把 Canvas 放进前端图形栈里，避免一上来就记 API。
这一章覆盖什么
- Canvas 2D 在浏览器图形栈中的位置
- 立即模式 vs 保留模式
- 学习顺序和能力分层
- 和 SVG、CSS、WebGL 的职责切分（细节见 09 选型）
文档清单
| 文档 | 解决的问题 |
|---|---|
| 本 README | 路线与分层 |
| 立即模式与场景图 | 为什么生产代码必须自建 scene，而不是「画完就算」 |
| 场景对照 | 白板/标注/签名/视频等从哪篇读起 |
能力分层
| 层级 | 表现 |
|---|---|
| L1 能画 | 能在已知尺寸的 canvas 上画 path / 图 / 字 |
| L2 能对齐 | DPR、resize、pointer 坐标三者一致，高分屏不糊 |
| L3 能交互 | 变换后的节点可命中、可拖、可撤销 |
| L4 能跑 | 动画不掉帧、读回有策略、Worker 离屏可用 |
| L5 能选 | 说得出这张图为什么不是 SVG 或 WebGL |
本体系默认读者从 L1 附近起步，正文按 L2–L4 写。L1 的 fillRect 教程不占篇幅。
不适用
- 需要无障碍树、可复制文本、CSS 布局参与的 UI：不要用 Canvas 当 DOM 替代品。
- 需要三维、大量三角、自定义着色器：选型章之后走 WebGL/WebGPU，不要在 2D context 里硬写 3D。