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!
Just add touch-action: none; to your canvas's style attribute.
After ~0.3 seconds starts touch events as page scrolling.