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