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

Question

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

所以我想让自己更熟悉画布元素，所以我遵循了 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 上的完整代码：https ://codepen.io/Skafec/pen/NWKzxrg