Javascript JS在带边距的画布上绘制时使用错误的坐标

嘿，伙计们，我在使用画布和一些基本的CSS样式时遇到了问题

所以我想让自己对canvas元素更熟悉一点，所以我遵循了Dev Ed（Youtube）关于如何使用canvas制作绘图应用程序的教程

我想通过为线条和背景添加一些颜色选项，添加一个标题等等，对它进行一点升级。我想把画布元素放在中间，并给它固定大小

现在，当我试图使用它时，画布使用了错误的坐标来绘制线

提前谢谢

控制鼠标坐标的代码：

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

  ctx.lineTo(e.clientX, e.clientY);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(e.clientX, e.clientY);
}

---

链接到codepen上的完整代码：

我最近为此创建了几个函数。实际坐标是指针位置的组合，使用边界矩形位置转换，并应用因子（实际大小与显示大小）

---

请参见

我最近为此创建了两个函数。实际坐标是指针位置的组合，使用边界矩形位置转换，并应用因子（实际大小与显示大小）

---

请参见

clientX/Y是相对于窗口的，而不是相对于画布的。试着用offsetX/Y代替。试过你的修复程序，有点效果。它为左上边缘提供了正确的坐标，其余的仍然在不应该的位置。clientX/Y是相对于窗口的，而不是相对于画布的。试着用offsetX/Y代替。试过你的修复程序，有点效果。它为左上边缘提供了正确的坐标，其余的仍然在不应该的位置。

function translatedX(x){
    var rect = canvas.getBoundingClientRect();
    var factor = canvas.width / rect.width;
    return factor * (x - rect.left);
}

function translatedY(y){
    var rect = canvas.getBoundingClientRect();
    var factor = canvas.width / rect.width;
    return factor * (y - rect.top);
}