touch-drawing-canvas.js

var can = document.getElementById("can");
var ctx = can.getContext("2d");
var touching = 0;

can.addEventListener("touchstart", touchDown, false);
can.addEventListener("touchmove", touchXY, true); // why is true
can.addEventListener("touchend", touchUp, false);

function touchUp() {
  touching = 0;
  touchXY();
}

function touchDown() {
  touching = 1;
  touchXY();
}

function touchXY(e) {
  if (!e) var e = event;
  e.preventDefault();
  canX = e.targetTouches[0].pageX - can.offsetLeft;
  canY = e.targetTouches[0].pageY - can.offsetTop;
  showPos();
}

function showPos() {
  ctx.font = "24pt Helvetica";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = "rgb(64, 255, 64)";
  var str = canX + ", " + canY;
  if (touching) str += " down";
  else str += " up";
  
  ctx.clearRect(0, 0, can.width, can.height);
  ctx.fillText(str, can.width/2, can.height/2);
  
  ctx.fillStyle = "white";
  ctx.fillRect(canX-5, canY-5, 10, 10);
}