Перемещение элементов в преобразованном Canvas с помощью курсора мыши

Question

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

class Box {
    constructor(x=0, y=0) {
        this.x = x;
        this.y = y;
    }

    draw(){}
}

После Масштабировать курсор мыши на холсте Мне удалось настроить панорамирование и масштабирование холста, но я не могу понять, как переместить один из них. виджеты на столько же, сколько и сам холст. Все мои попытки заканчиваются переводом виджета. Вот где я:

c.addEventListener('mousemove',function(evt){
    // Get mouse position
    lastX = evt.offsetX || (evt.clientX - c.offsetLeft);
    lastY = evt.offsetY || (evt.clientY - c.offsetTop);
    let pt = ctx.transformedPoint(lastX,lastY);
    dragged = true;
    if (dragStart && (move_item === false)){
        let t_x = pt.x-dragStart.x;
        let t_y = pt.y-dragStart.y;
        ctx.translate(t_x,t_y);
    } else {
        if (dragStart && (move_item === true)){
            for (let i=0; i<boxes.length; i++){
                if (boxes[i].selected) {
                    let t = ctx.transformedPoint(
                        boxes[i].x,
                        boxes[i].y
                    );
                    let t_x = pt.x-dragStart.x;
                    let t_y = pt.y-dragStart.y;
                    let r = ctx.translatePoint(t.x, t.y, t_x, t_y);
                    boxes[i].x = r.x;
                    boxes[i].y = r.y;
                }
            }
        }
    }
    redraw();
},false);

Итак, как лучше всего перевести элемент холста с помощью мыши?

Спасибо за любую идею или места с кодом, чтобы посмотреть в:)