List of Touches - Pointer Events standard

gistfile1.js

//Code to create a list of touches called pointerList
 
var pointerList = []; //Array of all the pointers on the screen
window.addEventListener("pointerdown", updatePointer, true);
window.addEventListener("pointermove", updatePointer, true);
window.addEventListener("pointerup", remPointer, true);
window.addEventListener("pointercancel", remPointer, true);
 
function updatePointer(e) { 
  if(e.pointerType === "touch") {
    pointerList[e.pointerId] = e; //Adds or update an entry to the array with the touch data for this touch
    e.target.setPointerCapture(e.pointerId); //Captures all subsequent events for this touch to the canvas, so you still get the pointerup even if you lift outside of the canvas element's bounds 
  }
}
function remPointer(e) { 
  if(e.pointerType === "touch")
    delete pointerList[e.pointerId]; //Removes the entry for this touch in the array now that it has lifted or been cancelled
}
 
//Example usage would be to poll the list in every browser render frame (~60FPS)
 
function sendTouchData() {
  console.log(pointerList)  //Replace this with your code to send the array back over WebSockets
  requestAnimationFrame(sendTouchData); //Schedule another callback on the next render frame
}
requestAnimationFrame(sendTouchData); //Schedule the first callback for the next render frame

gistfile2.css

canvas {
 touch-action: none; /* Disable default browser gestures and start getting pointer events for multi-touch */
}

In sendTouchData(), the pointerList would be an array where each item represents a touch currently on the screen. In each item, you'll find raw data properties like:

pointerId - a unique identifier for the touch (similar to touch events' identifier property)
clientX - x coordinate of the finger relative to the window
clientY - y coordinate of the finger relative to the window
offsetX - x coordinate of the finger relative to the element touched
offsetY - y coordinate of the finger relative to the element touched
width - approximate width (px) of the finger on the screen
height - approximate height (px) of the finger on the screen

For more, see the standard: http://www.w3.org/TR/pointerevents/#pointerevent-interface