Canvas API绘图时坐标与鼠标点击位置错位偏移问题

问题表现 #

开发类open-board绘图应用时，基于Canvas API实现的线条绘制位置低于鼠标实际点击点位，手动减去元素offsetTop/offsetLeft偏移后问题仍存在，且鼠标点击位置距离画布原点越远，点位与实际绘制图形的偏移距离越大，效果参考：
线条偏移问题示例截图

原实现代码存在三个核心问题：

• 偏移变量赋值逻辑写反：将垂直偏移offsetTop赋值给x轴变量、水平偏移offsetLeft赋值给y轴变量，坐标对应关系本身错误
• 画布分辨率与显示尺寸不匹配：Canvas默认内置300px*150px的绘图分辨率，仅通过CSS设置canvas宽高为100%会导致画布被CSS拉伸，绘图坐标与显示坐标按拉伸比例错位，这是「距离原点越远偏移越大」的根本原因
• 偏移量计算不全：offsetTop/offsetLeft仅能获取元素到最近定位父级的偏移，当前DOM存在两层嵌套定位容器，仅取内层drawArea的偏移会漏算外层容器的页面偏移，计算结果不准

修复步骤 #

1. 同步Canvas内置绘图分辨率与CSS显示尺寸
   永远不要仅通过CSS控制Canvas大小，初始化及后续窗口尺寸变化时，都要显式设置Canvas标签的width/height属性，和实际CSS渲染的像素尺寸保持一致。
2. 用getBoundingClientRect()计算鼠标相对画布坐标，替代手动累加offset的计算方式，自动适配所有嵌套定位场景，避免偏移计算错误。

修复后完整代码 #

HTML部分

<div class="draw-area-cont">
    <div class="draw-area">
        <canvas id="canvas"></canvas>
    </div>        
</div>

CSS部分

.draw-area{
    position: absolute;
    top:0rem;
    left:0rem;
    height: 175px;
    width: 350px;
    background:white;
}
.draw-area-cont{
    position: absolute;
    top:10rem;
    left:2rem;
    width:74rem;
    background:#eeeded;
    height: 37rem;
    overflow: hidden;
}

#canvas{
    height: 100%;
    background-color: white;
    width: 100%;
}

JS部分

const canvas = document.getElementById('canvas')
const tool = canvas.getContext('2d')
let lineToolSelected = false

// 初始化同步画布分辨率
function resizeCanvas() {
    const rect = canvas.getBoundingClientRect()
    canvas.width = rect.width
    canvas.height = rect.height
}
resizeCanvas()
// 窗口大小变化时重新同步分辨率
window.addEventListener('resize', resizeCanvas)

canvas.addEventListener("mousedown",(e)=>{
    // 获取画布当前在视口的位置，自动计算所有父级偏移
    const canvasRect = canvas.getBoundingClientRect()
    // 计算鼠标在画布内的相对坐标
    const x = e.clientX - canvasRect.left
    const y = e.clientY - canvasRect.top
    
    if(!lineToolSelected) {
        lineToolSelected = true
        tool.beginPath()
        tool.moveTo(x, y)
    } else {
        lineToolSelected = false
        tool.lineTo(x, y)
        tool.stroke()
    }
})

注意：如果画布存在CSS缩放、边框、边距，getBoundingClientRect()会自动计算实际渲染尺寸，不需要额外手动加减边距值。

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