HTML Canvas нарисовать прямую линию

Я хочу использовать инструмент линии стиля рисования MS, чтобы рисовать прямую линию с помощью пользовательского интерфейса на элементе холста html с использованием JS.

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

Я пробовал различные способы выполнить следующие шаги в этом порядке, но безуспешно:

Повторяйте шаги 2 и 3, пока мышь не будет отпущена:

1. Сохраните текущее изображение на холсте.
2. Нарисуйте прямую линию от начальной точки до текущей позиции курсора.
3. Восстановите предыдущее изображение, увиденное на шаге 1, на холсте при обнаружении движения мыши.
4. После отпускания мыши нарисуйте последнюю прямую линию от начальной точки до текущей позиции курсора.

window.onload = function() {
    const canvas = document.getElementById('paintCanvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });
    
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;

    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    let painting = false;
    let startX, startY;
    let canvasState = false;

    canvas.addEventListener('mousedown', startPosition);
    canvas.addEventListener('mouseup', endPosition);
    canvas.addEventListener('mousemove', draw);

    ctx.lineWidth = 5;
    ctx.lineCap = 'round';

    function startPosition(e) {
        painting = true;
        [startX, startY] = [e.offsetX, e.offsetY];
        ctx.save();
        ctx.beginPath();
        draw(e);
    }

    function endPosition() {
        ctx.closePath();
        ctx.restore();
        painting = false;
        canvasState = false;
    }

    function draw(e) {
        if (!painting) return;

        if (selectedTool.id === 'pencil') {
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
        } else if (selectedTool.id === 'line') {
            // write code that works with a line 
            if (e.type === 'mousemove') {
                // remove old preview line
                if (canvasState) {
                    ctx.putImageData(canvasState, 0, 0);
                } else {
                    canvasState = ctx.getImageData(0,0,canvas.width,canvas.height);
                }
                // paint straight line from original start to current mouse position
                ctx.moveTo(startX, startY);
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();
            }
        } else if (selectedTool.id === 'eraser') {
            if (e.type === 'mousedown') {
                ctx.strokeStyle = ctx.fillStyle;
                ctx.lineWidth += 5;      
            } else {
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();    
            }
        }
    }

};