PointerEvent stops firing after a short time-CodePudding

I'm currently trying to get a similar touch/stylus behaviour to Squid (the notetaking app). I have used the PointerEvent API and it all works, except for one annoying issue: After I put down the stylus or the finger, it draws a stroke for the next ~0.3 seconds, but after that, no more pointermove events are fired as long as the pointer is down.

here's my code:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <canvas id="canvas" width="500px" height="500px" style=" position: absolute;border: 2px solid red;"></canvas>
    <script src="index.js"></script>

</body>

</html>

index.js

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "white"

var pos = {}

canvas.addEventListener("pointerdown", function (e) {
    pos.x = e.pageX;
    pos.y = e.pageY;
});

canvas.addEventListener("pointermove", function (e) {
    console.log(e.pressure)

    switch (e.pointerType) {
        case "pen":
            ctx.beginPath();
            ctx.moveTo(pos.x, pos.y);
            ctx.lineTo(e.pageX, e.pageY);
            ctx.stroke();

            pos.x = e.pageX;
            pos.y = e.pageY;

            break;
        case "touch":
            ctx.fillRect(e.pageX - 10, e.pageY - 10, 20, 20);

            break;
    }
});

index.css is just a css reset

I'm really confused over this and can't seem to find anyone else who had this problem. Any help would be appreciated!

CodePudding user response：

Just add touch-action: none; to your canvas's style attribute.

After ~0.3 seconds starts touch events as page scrolling.