canvas模糊的根本原因是css尺寸与缓冲区尺寸不匹配导致插值拉伸，必须同步设置canvas.width/height、style.width/height和ctx.scale()三者，缺一不可。
canvas.style.width/height 拉伸必然模糊，因为没改缓冲区
只写 canvas.style.width = "600px" 或在 CSS 里设 width: 600px，而没碰 canvas.width，等于让浏览器把默认的 300×150 像素位图强行拉伸填满——插值缩放一上，线条发虚、文字毛边、isPointInPath() 判断失准全来了。
这不是抗锯齿开关能救的，是像素映射根本错位。验证很简单：ctx.getImageData(0, 0, 1, 1) 返回的 RGBA 数组如果长度大于 4（比如 8、12），说明左上角 1×1 逻辑像素已被插值摊开成多个物理像素，已经糊了。
-
canvas.width和canvas.height是属性，控制的是内部位图缓冲区大小，决定绘图精度和坐标映射 -
canvas.style.width和canvas.style.height是样式，只管“框多大”，不改变缓冲区 - 二者数值不一致时，浏览器只能做双线性插值，没有“高清重绘”这回事
必须同步设置 canvas.width/height、CSS 尺寸和 ctx.scale()
三者缺一不可，漏一个就糊。核心逻辑是：用物理像素撑满显示区域，再用 CSS “压回”设计尺寸，最后用 ctx.scale() 把坐标系对齐回来。
典型错误是只改 canvas.width 忘了 ctx.scale()，结果画出来的东西只有原尺寸的 1/dpr 大；或者反复调用 ctx.scale(dpr, dpr) 却没先 ctx.setTransform(1, 0, 0, 1, 0, 0)，导致缩放叠加（比如 scale(2) 执行两次变成 scale(4)）。
- 先取真实显示尺寸：
const rect = canvas.getBoundingClientRect()（别用offsetWidth，它受父级 transform 影响） - 设物理缓冲区：
canvas.width = rect.width * dpr，canvas.height = rect.height * dpr - 用 CSS 压回视觉尺寸：
canvas.style.width = rect.width + "px"，canvas.style.height = rect.height + "px" - 重置并缩放上下文：
ctx.setTransform(1, 0, 0, 1, 0, 0)后再ctx.scale(dpr, dpr)
响应式或系统缩放变化时，dpr 可能突变
window.devicePixelRatio 不是静态值。用户切显示器（比如从笔记本插到 4K 显示器）、调系统缩放（Windows 125%、macOS 缩放选项）、甚至 Chrome 里按 Ctrl + 放大页面，都会让 dpr 突然变。只监听 resize 事件不够。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
正确做法是用 window.matchMedia 监听分辨率变化：
const dpr = window.devicePixelRatio || 1;
const mediaQuery = window.matchMedia(`screen and (min-resolution: ${dpr}dppx)`);
mediaQuery.addEventListener('change', () => {
// 重设 canvas 尺寸和 ctx.scale
});
重设前务必先保存图像：const dataUrl = canvas.toDataURL()，否则清空缓冲区后内容全丢，重绘还可能因坐标偏移错位。
toDataURL() 导出还是糊？检查缩放是否残留或错位
导出模糊往往不是没设 dpr，而是缩放状态混乱。比如在 ctx.scale(dpr, dpr) 后，又用物理像素坐标绘图（想画 100×100 的矩形却写了 fillRect(0, 0, 200, 200)），或者导出前没 ctx.clearRect()，旧内容叠加新缩放，边缘更糊。
- 导出前确保坐标系干净：
ctx.setTransform(1, 0, 0, 1, 0, 0)再重绘关键内容 - 所有绘图坐标都按“CSS 像素”写，比如
fillRect(10, 10, 100, 100)，不要手动乘dpr - 若需像素级精确（如像素画），关掉抗锯齿：
ctx.imageSmoothingEnabled = false，但前提是缓冲区和缩放已配对正确
最易被忽略的是：canvas.width 赋值会清空画布，这是预期行为，不是 bug；但很多人忘了重绘，或者重绘时坐标没按缩放后的新上下文理解，结果画歪了还怪模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
