JavaScript: canvas touch events

Question

I am trying in vain to make my canvas tactile: I have added the touch events and e.preventdefault (to avoid scrolling), but nothing appears on my canvas (the method works perfectly on the desktop).

When I make a test using the Google Chrome responsive tools, nothing appears on the canvas (I just can see that the array ongoingTouches is filled ... here is my code (what did I miss?):

 class Canvas { constructor(CanvasId) { this.CanvasId = CanvasId; this.canvas = document.getElementById(this.CanvasId); this.enregistrer = document.getElementById(this.saveId); this.context = this.canvas.getContext("2d"); this.radius = 2; this.dragging = false; // True when clicking on the mouse this.lineWidth = this.radius*2; this.initCanvas(); this.initEvent(); } initCanvas() { this.context.clearRect(0, 0, 250, 250); // canvas vierge this.context.lineWidth = this.lineWidth; } colorForTouch(touch) { var id = touch.identifier; id = id.toString(16); // Make it a hexadecimal digit return "#" + id + id + id; } ongoingTouchIndexById(idToFind) { for (var i=0; i<this.ongoingTouches.length; i++) { var id = this.ongoingTouches[i].identifier; if (id == idToFind) { return i; } } return -1; // Not found } handleStart(e) { e.preventDefault(); var touches = evt.changedTouches; for (var i=0; i< touches.length; i++) { this.ongoingTouches.push(touches[i]); var color = this.colorForTouch(touches[i]); this.context.fillStyle = color; this.context.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4); this.compteur++; this.enregistrer.disabled = false; } } handleMove(e) { e.preventDefault(); var touches = e.changedTouches; this.context.lineWidth = 4; for (var i=0; i<touches.length; i++) { var color = this.colorForTouch(touches[i]); var idx = this.ongoingTouchIndexById(touches[i].identifier); this.context.fillStyle = color; this.context.beginPath(); this.context.moveTo(this.ongoingTouches[idx].pageX, this.ongoingTouches[idx].pageY); this.context.lineTo(touches[i].pageX, touches[i].pageY); this.context.closePath(); this.context.stroke(); this.ongoingTouches.splice(idx, 1, touches[i]); // Swap in the new touch record } } handleEnd(e) { e.preventDefault(); var touches = e.changedTouches; this.context.lineWidth = 4; for (var i=0; i<touches.length; i++) { var color = this.colorForTouch(touches[i]); var idx = this.ongoingTouchIndexById(touches[i].identifier); this.context.fillStyle = color; this.context.beginPath(); this.context.moveTo(this.ongoingTouches[i].pageX, this.ongoingTouches[i].pageY); this.context.lineTo(touches[i].pageX, touches[i].pageY); this.ongoingTouches.splice(i, 1); // Remove it; we're done } } initEvent() { this.canvas.addEventListener("touchstart",this.handleStart, false); this.canvas.addEventListener("touchmove",this.handleMove, false); this.canvas.addEventListener("touchleave", this.handleEnd, false); this.canvas.addEventListener("touchend", this.handleEnd, false); }

Answer 1

Finally I found an easy solution. This is the code I added:

 getTouchPosition(e) { var rect = this.canvas.getBoundingClientRect(e); return { x: (e.touches['0'].clientX - rect.left) * (this.canvas.width / rect.width), y: (e.touches['0'].clientY - rect.top) * (this.canvas.height / rect.height) } } handleStart(e) { var touchesPosition = this.getTouchPosition(e); this.dragging = true; this.context.moveTo(touchesPosition.x, touchesPosition.y); this.context.beginPath(); e.preventDefault(); } handleMove(e) { var touchesPosition = this.getTouchPosition(e); this.context.lineTo(touchesPosition.x, touchesPosition.y) this.context.stroke(); this.compteur++; e.preventDefault(); } handleEnd(e) { this.dragging = false; // Stop le tracé e.preventDefault(); } this.canvas.addEventListener("touchstart", function(e) { this.handleStart(e); }.bind(this)); this.canvas.addEventListener("touchmove", function(e) { this.handleMove(e); this.enregistrer.disabled = false; }.bind(this)); this.canvas.addEventListener("touchend", function(e) { this.handleEnd(e); }.bind(this));