I am just trying to draw on my phone using "pointer" events.
This works on my desktop with my mouse, but not on my (android) phone. I should be able to draw curved lines, but dragging with my finger on my phone results in an "enter" and a few "moves" but then it "leave"s.
It has to be online: https://dbarc.net/SOtest.html
<!DOCTYPE html>
<html>
<!-- works on desktop, leaves on phone (dbarc.net/SOtest.html) -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { width:400px; }
#canvas { background:#eee; }
</style>
<script>
"use strict";
let canvas, ctx, xx, yy, infodiv;
window.onload = function() {
infodiv = document.getElementById("infodiv"); // info output
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.addEventListener('pointerenter', function() { ptrEnter(); } );
canvas.addEventListener('pointerleave', function() { ptrLeave(); } );
canvas.addEventListener('pointermove', function(ev) { ptrMove(ev); } );
}
function ptrEnter() { // shows an enter
infodiv.innerHTML += "ENTER ";
}
function ptrLeave() { // shows a leave
infodiv.innerHTML += "LEAVE ";
}
function ptrMove(ev) { // draws (no pen up/down)
infodiv.innerHTML += "m ";
let x0 = canvas.offsetLeft, y0 = canvas.offsetTop;
let xold = xx, yold = yy;
xx = Math.floor(ev.clientX) - x0;
yy = Math.floor(ev.clientY) - y0;
ctx.beginPath();
ctx.moveTo(xold,yold);
ctx.lineTo(xx, yy);
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<div id="infodiv">Events: </div>
</body>
</html>
from Using canvas pointermove event on phone, the pointerleave event gets fired
No comments:
Post a Comment