Touch events

by louisremi

HTML

<canvas id=canvas width=400 height=200 style="border: 2px solid #333"></canvas>

JavaScript

var canvas = document.getElementById("canvas"),
    canvasCtx = canvas.getContext("2d");
            
canvas.addEventListener("touchmove", function( event ) {
  event.preventDefault();
  // Touch events include all fingers detected on the surface
  var touches = event.changedTouches,
    i = touches.length;
    
  // Touches can be iterated like an array
  while ( i-- ) {
    canvasCtx.beginPath();
      canvasCtx.arc(
      // each touch has attributes such as position
      touches[i].pageX, touches[i].pageY,
      // and an identifiers for fingers (used as radius here)
      ( touches[i].identifier + 1 ) * 2,
      0, 360
    );
    canvasCtx.fill();
      canvasCtx.closePath();
  }
});