1

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!

1 Answer 1

10

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

After ~0.3 seconds starts touch events as page scrolling.

1
  • 1
    To add some context: none = "Disable browser handling of all panning and zooming gestures." via spec
    – Jay Wick
    Commented Nov 15, 2023 at 11:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.