Javascript 鼠标/触摸坐标位于错误的HTML画布位置

我的HTML画布有问题，在实验阶段工作得很好，但是一旦我将其放入适当的开发中，鼠标坐标就变得完全不稳定，它确实会绘制，但是没有在正确的位置，即我单击并拖动绘制一条线，这条线就是画布中较低的绘制。我只是想确定坐标，这样鼠标光标就能准确地画出它应该在的位置

下面是我的代码，为了了解我在说什么，请务必调整浏览器窗口的大小，因为网站是特定于手机的。谢谢，如果有任何帮助，我们将不胜感激

我尝试过使用

getXY

函数，但之后我已经有了一个变量名，但它不起作用。我也尝试过各种造型技巧，但都没有用

函数init（）{
//从HTML文档中获取特定的画布元素
canvas=document.getElementById（'c'）；
}
函数中点BTW（p1、p2）{
返回{
x:p1.x+（p2.x-p1.x）/2，
y:p1.y+（p2.y-p1.y）/2
};
}
函数getPattern（）{
返回ctx.createPattern（img，“repeat”）；
}
var el=document.getElementById（'c'）；
var ctx=el.getContext（'2d'）；
ctx.lineWidth=15；
ctx.lineJoin=ctx.lineCap='round'；
var img=新图像；
img.onload=函数（）{
ctx.strokeStyle=getPattern（）；
};
img.src=”https://i.postimg.cc/rF2R0GRY/dick2.png";
var isDrawing，点数=[]；
var getXY=函数（e）{
var source=e.touchs？e.touchs[0]：e；
返回{
x:source.clientX，
y:source.clientY
};
};
var startDrawing=函数（e）{
isDrawing=true；
点推（getXY（e））；
e、 预防默认值（）；
};
var keepDrawing=函数（e）{
如果（！isDrawing）返回；
点推（getXY（e））；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
变量p1=点[0]；
变量p2=点[1]；
ctx.moveTo（p1.x，p1.y）；
对于（变量i=1，len=points.length；i
@font-face{
字体系列：Geoma常规演示；
src:url（Geoma Regular Demo.otf）；
}
@字体{
字体系列：Geoma演示；
src:url（Geoma Light demo.otf）；
}
@媒体屏幕和屏幕（最大宽度：425px）{
html，
身体{
溢出x：隐藏；
宽度：100%；
保证金：0；
}
}
帆布{
边框：3px实心#0BF446；
边界半径：15px 0px 15px 0px；
显示：块；
保证金：0自动；
利润上限：35px；
}
#清除按钮{
背景色：#04A12B；
边界半径：0 15px 0 15px；
填充：20px；
保证金：0自动；
显示：块；
字体大小：14px；
颜色：白色；
字体系列：Geoma演示；
利润上限：35px；
}
#页脚1{
背景色：#00671A；
边界半径：30px 30px 0px 0px；
文本对齐：居中；
填充：30px；
利润上限：35px；
}
#关于{
颜色：白色；
字体大小：16px；
字体系列：Geoma演示；
}
您需要将单击事件本地化为相对于画布元素。您可以通过从
el.getBoundingClientRect（）
中获取
top
和
left
并使用它们调整单击事件的
x
和
y
值来实现此目的。如下所示，大部分工作是在
getXY
函数中完成的


函数init（）{
//从HTML文档中获取特定的画布元素
canvas=document.getElementById（'c'）；
}
函数中点BTW（p1、p2）{
返回{
x:p1.x+（p2.x-p1.x）/2，
y:p1.y+（p2.y-p1.y）/2
};
}
函数getPattern（）{
返回ctx.createPattern（img，“repeat”）；
}
var el=document.getElementById（'c'）；
var ctx=el.getContext（'2d'）；
ctx.lineWidth=15；
ctx.lineJoin=ctx.lineCap='round'；
var img=新图像；
img.onload=函数（）{
ctx.strokeStyle=getPattern（）；
};
img.src=”https://i.postimg.cc/rF2R0GRY/dick2.png";
var isDrawing，点数=[]；
var getXY=函数（e）{
var source=e.touchs？e.touchs[0]：e；
常数{
clientX，
客户
}=来源；
常数{
左边
顶部
}=el.getBoundingClientRect（）；
const x=clientX-左；
const y=clientY-顶部；
返回{
x,，
Y
};
};
var startDrawing=函数（e）{
isDrawing=true；
点推（getXY（e））；
e、 预防默认值（）；
};
var keepDrawing=函数（e）{
如果（！isDrawing）返回；
点推（getXY（e））；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
变量p1=点[0]；
变量p2=点[1]；
ctx.moveTo（p1.x，p1.y）；
对于（变量i=1，len=points.length；i
@font-face{
字体系列：Geoma常规演示；
src:url（Geoma Regular Demo.otf）；
}
@字体{
字体系列：Geoma演示；
src:url（Geoma Light demo.otf）；
}