Improving the code, events in individual functions (refactoring)

Question

code

It is necessary from this piece of code

const rectPos = { x: 0, y: 0 };
const currPos = { x: 0, y: 0 };

const mouseEvent = () => {
canvas.onmousedown = (e) => {
    const start = { x: e.offsetX, y: e.offsetY };
        canvas.onmousemove = (e) => {
            currPos.x = getXPixelRatio * Math.round((rectPos.x + e.offsetX - start.x) / getXPixelRatio);
            currPos.y = getYPixelRatio * Math.round((rectPos.y + e.offsetY - start.y) / getYPixelRatio);
            currPos.x = edge(currPos.x, 0, w - 25);
            currPos.y = edge(currPos.y, 0, h - 25);         
            renderAll()
            drawRect(currPos.x, currPos.y);
        }
        document.onmouseup = (e) => {
            rectPos.x = currPos.x;
            rectPos.y = currPos.y;
            canvas.onmousemove = null
        }
    }
}

It is necessary to separate the event handler and the function itself

Something like this

const mouseDown = () =>{}
const mouseMove = () =>{}
const mouseUp = () =>{}

function mouseEvents() {
    canvas.addEventListiner("mousedown", mousedown)
    ....
}