如何在拖动绘制的矩形时保持鼠标位置成比例？

// 获取画布和上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 定义矩形起始位置和鼠标位置
var rectStartX, rectStartY, mouseX, mouseY;

// 鼠标按下事件
canvas.addEventListener("mousedown", function (e) {
    rectStartX = e.offsetX;
    rectStartY = e.offsetY;
    mouseX = e.clientX;
    mouseY = e.clientY;
});

// 鼠标移动事件
canvas.addEventListener("mousemove", function (e) {
    if (rectStartX !== undefined && rectStartY !== undefined) {
        // 计算鼠标移动距离
        var distanceX = e.clientX - mouseX;
        var distanceY = e.clientY - mouseY;

        // 根据鼠标移动距离计算矩形的宽高
        var rectWidth = Math.abs(distanceX);
        var rectHeight = Math.abs(distanceY);

        // 根据起始位置和计算得到的宽高绘制矩形
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.rect(rectStartX, rectStartY, rectWidth, rectHeight);
        ctx.stroke();
    }
});

// 鼠标松开事件
canvas.addEventListener("mouseup", function () {
    rectStartX = undefined;
    rectStartY = undefined;
});