咨询：绘图Canvas在页面中偏移的原因及修复方法

问题根源 #

你代码里直接用e.clientX/e.clientY作为Canvas的绘制坐标，这两个值是鼠标相对于浏览器视口左上角的位置，而非Canvas元素自身左上角的本地坐标。当Canvas不在视口左上角时，必然出现绘制点偏移。另外Canvas的CSS尺寸（350px高）和绘图上下文设置的尺寸（375px高）不一致，会导致绘制内容拉伸，也会加重偏移问题。

修复步骤 #

1. 统一Canvas尺寸 #

修改resize函数，让绘图上下文尺寸和CSS定义的Canvas尺寸保持一致：

function resize() {
  ctx.canvas.width = 650;
  ctx.canvas.height = 350; // 匹配CSS中的.height: 350px
}

2. 转换鼠标坐标为Canvas本地坐标 #

更新setPosition函数，计算鼠标相对于Canvas左上角的真实位置：

function setPosition(e) {
  const canvas = document.getElementById("canvas");
  // 获取Canvas在视口中的位置边界
  const rect = canvas.getBoundingClientRect();
  // 计算相对于Canvas左上角的坐标
  pos.x = e.clientX - rect.left;
  pos.y = e.clientY - rect.top;
}

3. 优化事件监听（可选） #

将绘制相关事件绑定到Canvas元素上，避免在Canvas外操作触发无效逻辑：

// 替换原document上的事件监听
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', setPosition);
canvas.addEventListener('mousemove', setPosition);

修正后的核心代码片段 #

// last known position
var pos = { x: 0, y: 0 };

window.addEventListener('resize', resize);
button.addEventListener('click', clear)
// 绑定事件到Canvas元素
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', setPosition);
canvas.addEventListener('mousemove', setPosition);


// new position from mouse event
function setPosition(e) {
  const canvas = document.getElementById("canvas");
  const rect = canvas.getBoundingClientRect();
  pos.x = e.clientX - rect.left;
  pos.y = e.clientY - rect.top;
}

// resize canvas
function resize() {
  ctx.canvas.width = 650;
  ctx.canvas.height = 350; // 匹配CSS高度
}

内容的提问来源于stack exchange，提问作者halted