Javascript 附加到画布对象-JS的IF语句出现问题

我确实认为if语句存在问题，该语句允许检测画布对象（显示的图像）在画布中的位置。提供了一个可复制的演示

注意：我确实希望保留css对齐，

canvasauto

，如果可能，不要删除它。

var canvas=document.getElementById（“c”）；
var ctx=canvas.getContext（“2d”）；
var the_button=document.getElementById（“the_button”）；
var the_background=document.getElementById（“the_background”）；
var-imageXpos=500；
var-imageYpos=300；
var imageWidth=110；
var imageHeight=80；
var imagecheck_Xpos=canvas.width-imageXpos；
var imagecheck_Ypos=canvas.height-imageYpos；
window.onload=函数（）{
ctx.drawImage（_背景，0，0，canvas.width，canvas.height）；
ctx.drawImage（按钮、图像检查按钮、图像检查按钮、图像检查按钮、图像宽度、图像高度）；
}
按钮功能=（事件）=>{
常数{
x,，
Y
}=事件；
/*我相信问题就在这里*/
if（（x>=imagecheck\u Xpos&&x<（imagecheck\u Xpos+imageWidth））&&
（y>=imagecheck\uYPos&&y<（imagecheck\uYPos+imageHeight）））{
警报（“”）
}
}
addEventListener（'click'，（e）=>按钮函数（e））
html，
身体{
宽度：100%；
身高：100%；
边际：0px；
边界：0；
溢出：隐藏；
显示：块；
}
.拉票汽车{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
您正在使用
MouseEvent
中的
x
。这是一个实验性的特征

该属性提供相对于应用程序视口的坐标

您可能需要，它是相对于（目标节点的填充边）的


var canvas=document.getElementById（“c”）；
var ctx=canvas.getContext（“2d”）；
var the_button=document.getElementById（“the_button”）；
var the_background=document.getElementById（“the_background”）；
var-imageXpos=500；
var-imageYpos=300；
var imageWidth=110；
var imageHeight=80；
var imagecheck_Xpos=canvas.width-imageXpos；
var imagecheck_Ypos=canvas.height-imageYpos；
window.onload=函数（）{
ctx.drawImage（_背景，0，0，canvas.width，canvas.height）；
ctx.drawImage（按钮、图像检查按钮、图像检查按钮、图像检查按钮、图像宽度、图像高度）；
}
按钮功能=（事件）=>{
常数{
抵销额x:x，
副词：y
}=事件；
/*我相信问题就在这里*/
if（（x>=imagecheck\u Xpos&&x<（imagecheck\u Xpos+imageWidth））&&
（y>=imagecheck\uYPos&&y<（imagecheck\uYPos+imageHeight）））{
警报（“”）
}
}
addEventListener（'click'，（e）=>按钮函数（e））
html，
身体{
宽度：100%；
身高：100%；
边际：0px；
边界：0；
溢出：隐藏；
显示：块；
}
.拉票汽车{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}