HTML5画布中的鼠标位置关闭？

Question

我在 SO 上尝试了一些解决方案，但它们不适用于我的设置。由于某种原因，我的画布上的鼠标位置已关闭。我在下面粘贴了我的 HTML 和 JS 以供参考。

当画布大小与窗口大小匹配时，鼠标可以正常工作，但是当它更小或更大时，我需要它也能正常工作。我该怎么做？

HTML

<canvas id="canvas"></canvas>

JS

window.addEventListener('load', () => {
    const canvas = document.querySelector('#canvas');
    const ctx = canvas.getContext('2d');

        // canvas.height = window.innerHeight;
        // canvas.width = window.innerWidth;

        canvas.height = 540;
        canvas.width = 960;
        
        // canvas.height = canvas.offsetHeight;
        // canvas.width = canvas.offsetWidth;

    let painting = false;

    var gradient = ctx.createLinearGradient(0, 0, 170, 0);
    gradient.addColorStop("0", "magenta");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("1.0", "red");

    function windowSize() {
        // canvas.height = window.innerHeight;
        // canvas.width = window.innerWidth;
        // canvas.height = 540;
        // canvas.width = 960;
        // canvas.height = canvas.offsetHeight;
        // canvas.width = canvas.offsetWidth;
    }
    function startPosition(e) {
        painting = true;
        draw(e);
    }
    function finishedPosition() {
        painting = false;
        ctx.beginPath();
    }
    function draw(e) {
        if(!painting) return;
        ctx.lineWidth = lineSize;
        ctx.lineCap = "round";
        ctx.strokeStyle = color;

        ctx.lineTo(e.clientX, e.clientY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.clientX, e.clientY);
    }

    var lineSize = 5;
    var color = "Black";

    // Event Listeners

    canvas.addEventListener('mousedown', startPosition);
    canvas.addEventListener('mouseup', finishedPosition);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('touchstart', startPosition);
    canvas.addEventListener('touchend', finishedPosition);
    canvas.addEventListener('touchmove', draw);
    // window.addEventListener('resize', windowSize);

});

Answer 1

这里接受的解决方案解决了我的问题。我希望这对将来的其他人有所帮助，因为它在搜索结果中的排名并不高。

Real mouse position in canvas