Javascript 画布鼠标事件和焦点

我有两个圆和一条线。这些圆有一个移动选项（你可以按它们并移动）。Mousemove事件有一个变量

distance

，用于计算鼠标与圆之间的距离

问题是，当你把一个圆移到另一个圆足够近的时候，它们就会结合在一起。如何避免这种情况？有没有一个选择，使一些重点或类似的东西？有没有办法解决这个问题（可能吗？）

:

var canvas=document.getElementById（'myCanvas'），
context=canvas.getContext（'2d'），
半径=12，
p=null，
开始=错误；
点={
p1:{x:100，y:250}，
p2:{x:400，y:100}
}
函数init（）{
返回设置间隔（抽签，10）；
}
canvas.addEventListener（'mousedown'，函数（e）{
开始=真；
});
canvas.addEventListener（'mouseup'，函数（e）{
开始=错误；
});
canvas.addEventListener（'mousemove'，函数（e）{
对于（p点）{
如果（启动）{
变量
mouseX=e.clientX-10，
mouseY=e.clientY-10，
距离=Math.sqrt（Math.pow（mouseX-point[p].x，2）+Math.pow（mouseY-point[p].y，2））；
如果（距离-10尝试保存在
mousedown
事件中按下的点

就像这样：

此外，它不会在每次鼠标移动时计算到每个点的距离，因此速度会更快。
我有一个问题-为什么移动是错误的？例如，为什么不为null？有什么区别吗？这是一种习惯，但为null会起作用，对。我认为false更明确，但这只是我的观点。
var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d'),
    radius = 12,
    p = null,
    start = false;

    point = {
        p1: { x:100, y:250 },
        p2: { x:400, y:100 }
    }

function init() {
        return setInterval(draw, 10);
}

canvas.addEventListener('mousedown', function(e) {
    start = true;
});

canvas.addEventListener('mouseup', function(e) {
    start = false;
});

canvas.addEventListener('mousemove', function(e) {

    for (p in point) {
        if(start) {
            var 
                mouseX = e.clientX -10,
                mouseY = e.clientY -10,
                distance = Math.sqrt(Math.pow(mouseX - point[p].x, 2) + Math.pow(mouseY - point[p].y, 2));

            if (distance -10<= radius) {
                point[p].x = e.clientX -10 ;
                point[p].y = e.clientY -10 ;
            } 

        }
    }
});


function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.beginPath();
    context.moveTo(point.p1.x,point.p1.y);
    context.lineTo(point.p2.x,point.p2.y);

    context.closePath();

    context.fillStyle = '#8ED6FF';
    context.fill();
    context.stroke();

    for (p in point) {
        context.beginPath();
        context.arc(point[p].x,point[p].y,radius,0,2*Math.PI);
        context.fillStyle = 'red';
        context.fill();
        context.stroke();
    }
    context.closePath();
}

init();