Canvas绘图如何修正父元素内边距导致的坐标偏移问题

offsetLeft/offsetTop的计算参考系是最近的设置了非static定位的祖先元素，中间所有static定位的父容器的padding、边框、滚动偏移都不会被计入，多层嵌套容器下必然出现计算偏差。你场景里的p-3、card、card-body如果都是默认static定位，它们的内边距不会被offset属性统计，直接用offset计算就会出现坐标往右下偏移的问题。

用浏览器原生提供的getBoundingClientRect()方法获取Canvas元素在视口中的真实渲染边界，这个API会自动把所有层级父元素的padding、边框、布局偏移、页面滚动偏移都计算在内，不需要手动累加任何父元素样式值。
如果你的Canvas存在CSS渲染尺寸和自身width/height属性定义的内部画布尺寸不一致的情况（比如响应式布局下给Canvas设了width:100%），还需要同步计算坐标缩放比，避免绘制拉伸/错位。

替换原有坐标计算逻辑为以下代码即可：

// 初始化时缓存canvas引用避免重复查询DOM
const canvas = document.getElementById('can');

// 绘制事件触发时执行以下逻辑
prevX = currX;
prevY = currY;

// 获取Canvas当前在视口内的真实渲染边界
const canvasRect = canvas.getBoundingClientRect();
// 计算画布内部像素和渲染尺寸的缩放比例
const coordScaleX = canvas.width / canvasRect.width;
const coordScaleY = canvas.height / canvasRect.height;

// 计算准确的画布内部坐标
currX = (e.clientX - canvasRect.left) * coordScaleX;
currY = (e.clientY - canvasRect.top) * coordScaleY;

draw();

• 不要尝试手动遍历父元素累加padding、border、margin值，不同布局模式（flex/grid/浮动）、不同浏览器下手动计算的兼容性极差，getBoundingClientRect()是W3C标准定义的全兼容方案，自动统计所有布局偏移
• 移动端触摸签名场景，将e.clientX/e.clientY替换为e.touches[0].clientX/e.touches[0].clientY即可，计算逻辑完全通用
• 不需要额外计算页面滚动偏移值，getBoundingClientRect()返回的坐标本身就是相对当前视口的，和clientX/clientY参考系完全一致
• 如果需要做高清屏适配，只需要初始化Canvas的时候把内部width/height设为渲染尺寸的window.devicePixelRatio倍，缩放比计算逻辑不需要改动，会自动适配

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