Javascript 尝试在画布上选择线条或矩形

我希望能够单击任何线条（肌肉）和新线，然后在我的程序中高亮显示它，就像我现在可以处理节点一样。我想使用context.isPointInPath（），但我觉得这太有限了，因为行只有1像素宽。现在我想看看把直线改成矩形。因为这样我就可以看到鼠标点击是否在矩形的高度和宽度范围内。但是，我很难找到将矩形连接到两个节点的方法，就像我现在使用的笔划一样。 到目前为止，我的计划是：

/*jshint版本：6*/
//把一切都画在画布上
//TODO：将画布的使用更改为容器，并移动元素以避免框架图形的缓冲区
//节点类
类节点{
构造函数（x、y、r、颜色、高光、高光颜色）{
这个.x=x；
这个。y=y；
这个.r=r | | 20；
this.color=color | |“#ff0”；
this.highlight=highlight | | false；
this.highlightColor=highlightColor | |“#0000FF”；
}
}
//肌肉类
阶级肌肉{
构造函数（节点1、节点2、宽度、颜色）{
this.node1=node1；
this.node2=node2；
此宽度=宽度| | 5；
this.color=color | |“#f00”；
//此肌肉连接到的节点的属性
对象。定义属性（此{
节点1x：{
“get”：（）=>this.node1.x，
“设置”：x=>{
这个.node1.x=x；
}
},
第1点：{
“get”：（）=>this.node1.y，
“设置”：y=>{
这个.node1.y=y；
}
},
节点2x：{
“get”：（）=>this.node2.x，
“设置”：x=>{
this.node2.x=x；
}
},
节点2y：{
“get”：（）=>this.node2.y，
“设置”：y=>{
这个.node2.x=y；
}
}
});
}
}
函数setParentForNodes（）{
this.nodes.forEach（node=>{
node.parentbiote=这个；
});
}
阶级生物{
构造器（节点、肌肉、节点颜色）{
this.nodes=节点；
这个。肌肉=肌肉；
this.nodeColors=nodeColors | |“#ff0”；
setParentForNodes.call（this）；
对象。定义属性（此{
创建者编号：{
“get”：（）=>biotes.indexOf（this），
}
});
}
addNewNode（新节点）{
newNode.parentbiote=此；
this.nodes.push（newNode）；
}
添加新节点（新节点）{
forEach（函数（节点）{
node.parentbiote=这个；
}，这个）；
this.nodes=this.nodes.concat（newNodes）；
}
}
变量节点=[
新节点（100100），
新节点（200200）
];
肌肉变异=[
新肌肉（节点[0]，节点[1]）
];
变量=[
新生物（节点、肌肉）
];
var addNodePressed=false；
var attachMusclePressed=false；
var addLimbPressed=false；
函数绘制（容器、ctx、节点、CreatureMuscle）{
//在容器中抽取
ctx.fillStyle=“#000000”；
ctx.fillRect（container.y，container.x，container.width，container.height）；
//用于循环以绘制节点的所有对象
for（设i=0；i