canvas宽高必须用HTML的width/height属性设置，因其控制位图缓冲区大小；仅用CSS会导致拉伸失真、坐标错位、线条模糊；正确做法是直接在标签中声明整数像素值，如width="800" height="600"。
canvas 宽高必须用 HTML width/height 属性设置
Canvas 的宽高不是样式问题，而是位图缓冲区大小问题。只靠 style="width:800px;height:600px" 会导致绘图拉伸、鼠标坐标错位、线条模糊——因为底层缓冲区仍是默认的 300×150 像素。
正确做法是直接在标签里写属性：
<canvas id="myCanvas" width="800" height="600">您的浏览器不支持 canvas</canvas>
-
width和height是像素值，不带单位（不能写width="800px"） - 若需缩放显示，再用 CSS 控制
style="width:400px;height:300px"，但必须确保 HTML 属性值与实际绘图分辨率匹配 - 标签内文本是降级内容，仅在不支持 Canvas 的旧浏览器中显示
获取 2D 上下文前必须检查 DOM 就绪和元素存在
getContext("2d") 返回 null 是常见错误源头，通常因为元素没找到或上下文类型拼错。
典型安全写法：
立即学习“前端免费学习笔记（深入）”；
const canvas = document.getElementById("myCanvas");<br>if (!canvas) throw new Error("找不到 canvas 元素");<br>const ctx = canvas.getContext("2d");<br>if (!ctx) throw new Error("浏览器不支持 2D 上下文");- 确保
<script>放在</body>前，或监听DOMContentLoaded -
"2d"字符串大小写敏感，写成"2D"或"two-d"都会失败 - 同一个
<canvas>只能获取一种上下文：先取了"2d"，再调getContext("webgl")会返回null
Canvas 坐标系原点在左上角，y 轴向下为正
这不是可选设定，是硬编码行为。所有绘图函数如 fillRect(x, y, w, h) 中的 y 指的是距顶部的距离，不是数学意义上的“纵坐标”。
- 想画在画布正中央？得手动算：
x = (canvas.width - w) / 2，y = (canvas.height - h) / 2 - 路径中的
moveTo()、lineTo()同样遵循此规则 - 别试图用
transform翻转 y 轴来“修正”，那会让鼠标事件、字体渲染、图像加载全乱套
绘图前必须显式设置 fillStyle/strokeStyle 等样式
Canvas 不继承 CSS 样式，也没有默认“当前颜色”概念。每次绘图前不设 fillStyle，fillRect() 就是透明的；不设 strokeStyle，strokeRect() 就不显示边框。
- 样式设置必须在绘图命令之前，顺序不能颠倒
-
fillStyle支持颜色名、#RRGGBB、rgb()、rgba()、渐变、图案，但不支持 CSS 变量 - 路径类操作（
beginPath()→lineTo()→fill()）必须成对出现，漏掉beginPath()会导致路径叠加累积
真正容易被忽略的，是缓冲区尺寸和显示尺寸的分离——它不像普通 DOM 元素那样“所见即所得”。哪怕你把 canvas 用 CSS 缩放到 100×100，只要 HTML 属性还是 width="1600" height="900"，你就得按 1600×900 的坐标去画，否则一切定位都会偏移。
