vscode 默认不识别 canvas 类型，需用 / @type {htmlcanvaselement} / 注释声明元素类型，再用 / @type {canvasrenderingcontext2d} / 注释声明上下文类型，注释必须独占一行且格式严格。
VSCode 默认对 canvas 相关对象没有完整类型推导，所以 getContext 返回值是 any，后续调用 ctx.fillRect、ctx.beginPath 等方法时，根本不会弹出提示。
为什么 document.querySelector('#canvas') 拿到的变量没 Canvas 方法提示
因为 TypeScript/JS 语言服务默认把 querySelector 的返回值当作 Element 或 HTMLElement，它不包含 getContext 这类专属方法。VSCode 不会主动“猜”你接下来要把它当画布用。
- 必须显式告诉编辑器：“这个变量是
HTMLCanvasElement” - 注释要写在获取变量的 正上方一行，不能合并成同一行，也不能放在后面
- 写成
/** @type {HTMLCanvasElement} */（注意空格和花括号），少一个字符都可能失效
getContext('2d') 后还是没提示？补全上下文类型
即使 canvas 变量有了类型，getContext('2d') 返回的仍是泛型 RenderingContext，不是具体的 CanvasRenderingContext2D。所以 ctx. 按 Ctrl+Space 依然看不到 strokeRect 这类方法。
- 在调用
getContext的前一行加：/** @type {CanvasRenderingContext2D} */ - 如果是 WebGL：换成
/** @type {WebGLRenderingContext} */ - 注意：只对
'2d'和'webgl'（或'webgl2'）生效；其他字符串如'bitmaprenderer'不触发该类型
插件不是必需，但 canvas-snippets 能省几行重复注释
纯靠注释就能解决 95% 的提示问题，不需要装任何插件。但如果你频繁写 Canvas 示例或教学代码，canvas-snippets 插件能自动展开带类型注释的模板：
- 输入
canvas2d→ 补全整个带HTMLCanvasElement和CanvasRenderingContext2D注释的结构 - 输入
canvas3d→ 补全 WebGL 上下文模板 - 插件不改变类型系统，只是帮你少打几行注释；删掉插件，已有注释照样生效
最容易被忽略的是注释位置和格式：多一个空格、少一个 *、写在赋值语句同一行，都会让类型提示静默失效。VSCode 不报错，只是“假装看不见”。
