Самый чистый код перетаскивания на холсте Javascript

Я ищу самый быстрый и легкий способ перетаскивать фигуры и спрайты на холст JS для целей разработки игр.

Я начал с проверки расстояния, используя текущее положение мыши и начало кругов. Это работает, но когда они перекрываются, у нас возникают проблемы, и я не знаю, насколько хорошо это будет работать при тестировании нескольких спрайтов и других форм еще на каждом «кадре».

Приветствуются любые комментарии или указатели на лучшие методы!

Я бы предпочел не использовать такую ​​библиотеку, как jQuery, поскольку я стремлюсь к чистой скорости и легкости и, конечно же, для изучения реальных методов! Вот где я:

//add the canvas listeners and functions

canvas.addEventListener("mousemove",mousemove);
canvas.addEventListener("mousedown",mousedown);
canvas.addEventListener("mouseup",mouseup);

function mousemove(e){
    mouseX = e.layerX - canvas.offsetLeft;
    mouseY = e.layerY - canvas.offsetTop;

//for each circle stored in my array of Circle objects, is my mouse within its'           
//bounds? If so, set the circles' (X,Y) to my mouse's (X,Y)

    for(i=0;i<circArray.length;i++){
        dx = mouseX - circArray[i].x;
        dy = mouseY - circArray[i].y;
        dist = Math.sqrt((dx*dx) + (dy*dy));
        if(draggable && dist < circArray[i].r){         
            circArray[i].x = mouseX;
            circArray[i].y = mouseY;
        }
    }
}

function mousedown(){
        draggable = true;
}

function mouseup(){
        draggable = false;
}