Firefox/Projects/Multitouch Polish/DOM Events/Examples

Tracking divs

var assignedFingers = {};
var lastused = 0;

function touchMove(event) {
var divId;
if (lastused >= 4) return;
if (assignedFingers[event.streamId]) {
  divId = assignedFingers[event.streamId];
} else {
  divId = "trackingdiv" + (++lastused);
  assignedFingers[event.streamId] = divId;
}
  document.getElementById(divId).style.left = event.clientX + 'px';
  document.getElementById(divId).style.top  = event.clientY + 'px';
}
document.addEventListener("MozTouchMove", touchMove, false);
document.addEventListener("MozTouchRelease", function() { lastused--; }, false);

Drawing canvas

var canvasctx = null;
 
function fadeOut() {
  canvasctx.fillStyle = 'rgba(255,255,255,.15)';
  canvasctx.fillRect(0,0,1100,600);
}
window.setInterval(fadeOut,180);

function listenTo(event) {
  canvasctx.fillStyle='rgba(0,0,0,1)';
  canvasctx.beginPath();
  canvasctx.arc(event.clientX, event.clientY, 20, 0, Math.PI*2, 1);
  canvasctx.fill();
  canvasctx.closePath();
}

document.addEventListener("MozTouchMove", listenTo, false);
document.addEventListener("DOMContentLoaded", function() {
canvasctx = document.getElementById("drawingcanvas").getContext('2d');
}, false);

Image resizing

This example keeps the image ratio to a square by calculating the distance between the two fingers and using that as the diagonal size of the image

document.addEventListener("MozTouchDown", touchdown, false);
document.addEventListener("MozTouchRelease", touchrelease, false);
document.addEventListener("MozTouchMove", touchmove, false);

var X1, Y1, X2, Y2;

var fingersTracked = 0;

var fingerIds = [-1,-1,-1,-1];

function touchdown(e) {	
  if (fingersTracked < 4)
    fingerIds[fingersTracked] = e.streamId;
  fingersTracked++;
}

function touchrelease(e) {
  fingersTracked--;
}

function dist(x1,x2,y1,y2) {
  return Math.sqrt( (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1) );
}

function touchmove(e) {

  var img1 = document.getElementById("image1");
  var img2 = document.getElementById("image2");
  var diagonal, sidesize;
  
  if (fingerIds[0] == e.streamId) { // finger 1
    X1 = e.clientX;
    Y1 = e.clientY;

  } else if (fingerIds[1] == e.streamId) { // finger 2
    diagonal = dist(X1, e.clientX, Y1, e.clientY);
    sidesize = diagonal / Math.sqrt(2);
	
    img1.style.left = ((e.clientX < X1) ? e.clientX : X1) + "px"
    img1.style.top  = ((e.clientY < Y1) ? e.clientY : Y1) + "px"
	
    img1.style.width  = sidesize + "px"
    img1.style.height = sidesize + "px"

  } else if (fingerIds[2] == e.streamId) { // finger 3
    X2 = e.clientX;
    Y2 = e.clientY;

  } else if (fingerIds[3] == e.streamId) { // finger 4
    diagonal = dist(X2, e.clientX, Y2, e.clientY);
    sidesize = diagonal / Math.sqrt(2);
	
    img2.style.left = ((e.clientX < X2) ? e.clientX : X2) + "px"
    img2.style.top  = ((e.clientY < Y2) ? e.clientY : Y2) + "px"

    img2.style.width  = sidesize + "px"
    img2.style.height = sidesize + "px"	
  }

}