Creé un elemento de lienzo en un archivo HTML y quiero dibujar un círculo en la ubicación del lienzo donde el usuario lo toca. Probé el siguiente código pero no funciona. Dibuja un círculo cuando toco el lienzo, pero los círculos se dibujan en lugares totalmente diferentes a donde el dedo toca el lienzo.
var ongoingTouches = []; function startup() { var myCanvas = document.getElementById("myCanvas"); myCanvas.addEventListener("touchstart", handleStart, false); myCanvas.addEventListener("touchend", handleEnd, false); myCanvas.addEventListener("touchcancel", handleCancel, false); myCanvas.addEventListener("touchmove", handleMove, false); } function colorForTouch(touch) { var r = touch.identifier % 16; var g = Math.floor(touch.identifier / 3) % 16; var b = Math.floor(touch.identifier / 7) % 16; r = r.toString(16); g = g.toString(16); b = b.toString(16); var color = "#" + r + g + b; return color; } function copyTouch({ identifier, pageX, pageY }) { return { identifier, pageX, pageY }; } function handleStart(e) { e.preventDefault(); var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d"); var touches = e.changedTouches; var rec = myCanvas.getBoundingClientRect(); for (var i = 0; i < touches.length; i++) { ongoingTouches.push(copyTouch(touches[i])); var color = colorForTouch(touches[i]); ctx.beginPath(); ctx.arc(touches[i].clientX - rec.left, touches[i].clientY - rec.top, 4, 0, 2 * Math.PI, false); ctx.fillStyle = color; ctx.fill(); } } function handleEnd(e) {} function handleEnd(e) {} function handleCancel(e) {} function handleMove(e) {} document.addEventListener("DOMContentLoaded", startup); #myCanvas { width: 600px; height: 600px; background-color: bisque; border: solid black 1px; } <h1>The TouchEvent</h1> <canvas id="myCanvas"></canvas>¿Me podría ayudar?