HTML5 Canvas绘图应用手绘线条Y坐标不跟随鼠标偏移问题排查

问题根源 #

• 画布尺寸不匹配：canvas的CSS显示高度为窗口高度 - 29px头部 - 5px底部边距，但你为canvas.height属性赋值为window.innerHeight，导致画布纵向被等比压缩，Y轴偏移量随位置向下逐渐增大。
• 坐标体系不统一：mousedown阶段使用自定义的错误坐标计算逻辑，mousemove阶段直接使用offsetX/Y，两套坐标数值不匹配。
• 容器高度不生效：未给html、body设置height:100%和默认边距清零，导致父容器的高度百分比设置失效。
• getBoundingClientRect使用错误：offsetX/Y本身就是相对于canvas元素左上角的坐标，不需要额外加减getBoundingClientRect返回的偏移值，提前存储的canrect也会随页面布局变化失效。

修复步骤 #

1. 首先补充全局样式，确保容器高度正常生效：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

2. 修正canvas尺寸赋值逻辑，匹配容器实际显示尺寸：

// 删除提前定义的const canrect = canvas.getBoundingClientRect();
const canvasContainer = document.getElementById('canvascontainer');
canvas.width = canvasContainer.clientWidth;
canvas.height = canvasContainer.clientHeight;
maincanvas.width = canvasContainer.clientWidth;
maincanvas.height = canvasContainer.clientHeight;

3. 删除错误的getMousePos函数，统一全流程坐标逻辑：

// 直接移除getMousePos函数定义
canvas.onmousedown = function(e) {
  isDrawing = true;   
  canvas.addEventListener("mousemove", drawDirectPath, false);
  // 统一使用offsetX/Y作为绘图坐标
  lastPoint = { x: e.offsetX, y: e.offsetY };
};

4. （可选）添加窗口resize监听，适配窗口尺寸变化：

window.addEventListener('resize', () => {
  // 保存当前主画布内容
  const tempImage = maincontext.getImageData(0, 0, maincanvas.width, maincanvas.height);
  // 重新设置画布尺寸
  canvas.width = canvasContainer.clientWidth;
  canvas.height = canvasContainer.clientHeight;
  maincanvas.width = canvasContainer.clientWidth;
  maincanvas.height = canvasContainer.clientHeight;
  // 恢复主画布内容
  maincontext.putImageData(tempImage, 0, 0);
  // 重绘辅助线
  drawGuideLines();
});

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