Javascript 放大混乱的画布区域单击

下面是我的页面的简化版本。在下面的演示中，点击一个圆圈，应该打印出在div中点击的圆圈的名称。我有两个问题。 1） 当我放大页面时（Chrome在加载页面时似乎会在我的页面上自动执行此操作，因此在使用Chrome浏览器时，我当前必须缩小可点击区域才能工作），逐像素点击检测不再起作用。我通过检查距圆心的距离（以像素为单位）来检测是否在三个圆中的一个圆内发生单击。你可以试着放大，看看点击圆圈是否能产生预期的结果

2） 圆圈右侧的文本有时不显示，我必须手动刷新页面一次（首次加载后）才能看到文本显示在圆圈旁边

定义单击的代码位于脚本部分的底部。 我建议您以完整的页面查看下面的页面

var总vap计数=12；
var总STAU计数=3；
//交流电
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（175,50,30,0,2*Math.PI）；
ctx.fillStyle=“#004379”；
ctx.font=“14px拉托”；
如果（“1”<2）{
ctx.fillText（“1”+“AC”，211，50）；
}否则{
ctx.fillText（“2”+“ACs”，211，50）；
}
ctx.fill（）；
//sta
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（175300,30,0,2*Math.PI）；
ctx.fillStyle=“#004379”；
ctx.font=“14px拉托”；
如果（总STAU计数<2）{
ctx.fillText（“+total_Stau_count+”设备），211300）；
}否则{
ctx.fillText（“+total_Stau_count+”设备），211300）；
}
ctx.fillText（“已连接”，211315）；
ctx.fill（）；
//ssid
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（50175,30,0,2*Math.PI）；
ctx.fillStyle=“#004379”；
ctx.font=“14px拉托”；
如果（总vap计数<2）{
ctx.fillText（“+total_vap_count+”SSID），86175）；
}否则{
ctx.fillText（“+total_vap_count+“SSIDs”，86175）；
}
ctx.fill（）；
//ssid状态
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（50+数学sin（数学PI/4）*30175数学cos（数学PI/4）*30,8,0,2*数学PI）；
if（总vap计数）{
ctx.fillStyle=“#4caf50”；
}否则{
ctx.fillStyle=“#ff0000”；
}
ctx.fill（）；
//sta状态
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（175+Math.sin（Math.PI/4）*30300-Math.cos（Math.PI/4）*30,8,0,2*Math.PI）；
如果（总统计）{
ctx.fillStyle=“#4caf50”；
}否则{
ctx.fillStyle=“#ff0000”；
}
ctx.fill（）；
//交流状态
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（175+Math.sin（Math.PI/4）*30,50-Math.cos（Math.PI/4）*30,8,0,2*Math.PI）；
如果（parseInt（“1”）>0）{
ctx.fillStyle=“#4caf50”；
}否则{
ctx.fillStyle=“#ff0000”；
}
//ctx.fillStyle=“#e9ebee”；
ctx.fill（）；
//台词。
如果（parseInt（“1”）>0）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（50+Math.sin（Math.PI/4）*30+10175 Math.cos（Math.PI/4）*30-10）；
ctx.lineTo（175-Math.sin（Math.PI/4）*30-5,50+Math.cos（Math.PI/4）*30+5）；
ctx.lineWidth=3；
ctx.strokeStyle=“#004379”
ctx.stroke（）；
}
if（总vap计数和总sta计数）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（50+Math.sin（Math.PI/4）*30+5175+Math.cos（Math.PI/4）*30+5）；
ctx.lineTo（175-Math.sin（Math.PI/4）*30-5300-Math.cos（Math.PI/4）*30-5）；
ctx.lineWidth=3；
ctx.strokeStyle=“#004379”
ctx.stroke（）；
}
$（文档）.ready（函数（）{
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var paint1=设置超时（（）=>{
ctx.font=“16px font”；
ctx.fillStyle=“白色”；
ctx.fillText（'\uf0ac'，170,55）；
},2000);
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var paint2=设置超时（（）=>{
ctx.font=“16px font”；
ctx.fillStyle=“白色”；
ctx.fillText（'\uf10b'，170305）；
},2000);
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var paint3=设置超时（（）=>{
ctx.font=“16px font”；
ctx.fillStyle=“白色”；
ctx.fillText（'\uf012'，45，180）；
},2000);
$（“#myCanvas”）。单击（函数（e）{
var x=e.clientX；
变量y=e.clientY；
控制台日志（“内部点击”）；
控制台日志（x）；
控制台日志（y）；
//x起点：5，y起点：213用于画布
如果（数学功率（x-55，2）+数学功率（y-175-213，2）<数学功率（30，2））{
//$j（“#概述页面”）.hide（）；
//openNav（）；
$（“#demo”）.empty（）.append（“单击ssid”）；
}
如果（数学功率（x-175，2）+数学功率（y-300-213，2）<数学功率（30，2））{
//$j（“#概述页面”）.hide（）；
//openNav_sta（）；
$（“#demo”）.empty（）.append（“sta clicked”）；
}
如果（数学功率（x-175，2）+数学功率（y-50-213，2）<数学功率（30，2））{
//$j（“#概述页面”）.hide（）；
//openNav_ac（）；
$（“#demo”）.empty（）.append（“ac单击”）；
}
});
})

#左菜单{
列表样式类型：无；
保证金：0；
填充：0；
宽度：330px；
背景色：#e9ebee；
位置：固定；
身高：100%；
溢出：自动；
边框：1px实心#e9ebee；
边界半径：6px；
字体系列：“Lato”，Helvetica，无衬线；
字号：18px；
}
李阿{
显示：块；
颜色：#000；
填充：8px 18px；
文字装饰：无；
}
李安：很活跃{
背景色：#00