getBoundingClientRect()获取偏移缩放canvas坐标Y轴异常 绘图失效问题

你的代码一共存在4个直接导致坐标错误、功能失效的问题，逐个修复即可正常绘图：

• 事件监听器绑定逻辑错误：你直接在addEventListener的第二个参数位置写draw(canvas)/startPosition(canvas)，会在页面加载时立刻执行函数，而非把函数注册为事件回调，鼠标触发时根本不会执行对应逻辑，同时参数传递顺序完全混乱。
• 对象属性访问语法错误：坐标读取时写的coordinates[x]/coordinates[y]属于变量属性访问，但你从未定义过名为x、y的变量，会直接抛出引用错误中断代码执行，正确写法是点访问符coordinates.x/coordinates.y。
• 尺寸计算偏差导致Y轴缩放比例错误：你的canvas父容器存在内边距、canvas自身存在边框，默认box-sizing: content-box规则下，你设置的canvas.style.width='100%'/canvas.style.height='100%'是指内容区占满父容器，而你用offsetWidth/offsetHeight给canvas内部位图赋值时，这两个值包含了canvas自身的边框宽度，和getBoundingClientRect()拿到的实际渲染尺寸计算出的scaleY会出现固定偏差；因为容器高度远小于宽度，Y轴的尺寸偏差占比更高，就会出现你遇到的X轴坐标基本准确、Y轴始终偏移的现象。
• 脚本加载时机错误：你在head里给脚本加了async属性，脚本下载完成后会立刻执行，此时页面DOM还未渲染完成，document.querySelector('canvas')大概率拿到null，直接导致初始化失败。

CSS部分 #

给canvas加上box-sizing: border-box，让宽高100%的设置包含边框，彻底消除尺寸计算偏差：

html, body{
    margin: 0;
    padding: 0;
    border: 0;
}

h1{
    text-align: center;
}
.flexContainer{
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
}
.canvasContainer{
    width: 1000px;
    background-color: #0b0d9c;
    position: relative;
    height: 160px;
    padding: .5rem .5rem .5rem .5rem;
    
}

canvas{
    /* 新增这一行，让宽高计算包含边框 */
    box-sizing: border-box;
    border-style: solid;
    border-width: .1rem;
    border-color: #000000;
    background-color: #ffffff;
}

JavaScript部分 #

修正事件绑定、属性访问写法，调整初始化时机，移除多余参数传递：

// 等DOM加载完成再初始化，避免async导致的拿不到元素问题
document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    let painting = false;

    function fitToContainer(canvas){
        canvas.style.width = '100%';
        canvas.style.height = '100%';
        // 现在box-sizing是border-box，offsetWidth/Height和实际渲染尺寸完全匹配
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
    }

    fitToContainer(canvas); 

    function getMousePos(canvas, e) {
        const rect = canvas.getBoundingClientRect();
        const scaleX = canvas.width / rect.width;
        const scaleY = canvas.height / rect.height;
        return {
            x: (e.clientX - rect.left) * scaleX,
            y: (e.clientY - rect.top) * scaleY
        }
    }

    function startPosition(e){
        painting = true;
        draw(e);
    }

    function lastPosition(){
        painting = false;
        ctx.beginPath();
    }

    function draw(e){
        if (!painting) return;
        ctx.lineWidth = 10;
        ctx.lineCap = 'round';

        const coordinates = getMousePos(canvas, e);
        // 修正属性访问写法
        ctx.lineTo(coordinates.x, coordinates.y);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(coordinates.x, coordinates.y);
    }

    // 修正事件绑定，直接传函数引用，事件对象会自动作为第一个参数传入
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mousedown', startPosition);
    canvas.addEventListener('mouseup', lastPosition);
    // 补充鼠标移出canvas停止绘制的逻辑，避免拖出区域后回来仍持续绘制
    canvas.addEventListener('mouseleave', lastPosition);
})

HTML部分 #

去掉脚本的async属性即可，JS内已经做了加载完成监听，即使保留async也可正常运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="canvasOutlookAndLogic.js"></script>
    <title>Just draw it</title>
</head>
<body>
    <header>
        <h1>Make any drawing you want</h1>
    </header>
    <div class="canvasContainer">
        <canvas>
            Space to draw
        </canvas>
    </div>
</body>
</html>

修复后X/Y轴坐标会完全对齐鼠标位置，自由绘制线条功能可正常运行。如果后续需要适配窗口大小变化，只需要在window的resize事件里重新调用fitToContainer(canvas)即可。

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