event.js

var canvas = document.createElement("canvas");
canvas.width = 200; canvas.height = 200;

var dispCanvas = document.createElement("canvas");
dispCanvas.width = 400; dispCanvas.height = 400;
var dispCtx = dispCanvas.getContext("2d");

// setup pixel scaling
dispCtx.imageSmoothingEnabled       = false;
dispCtx.oImageSmoothingEnabled      = false;
dispCtx.mozImageSmoothingEnabled    = false;
dispCtx.webkitImageSmoothingEnabled = false;

var scale = dispCanvas.width/canvas.width;

var ox = oy = 0, mouse = {x:0, y:0};
(function() {
  var el = dispCanvas;
  do{
    ox += el.offsetLeft;
    oy += el.offsetTop;
  } while(el = el.offsetParent)
})();

dispCanvas.addEventListener("mousedown", onDown, false);
dispCanvas.addEventListener("touchstart", onTouch, false;)

function onDown(mouseEvent) {
  var x = mouseEvent.pageX;
  var y = mouseEvent.pageY;
  touchOrClick(x,y); 
}

function onTouch(touchEvent) {
  var e = touchEvent.targetTouches[0];
  var x = e.pageX;
  var y = e.pageY;
  touchOrClick(x, y);
}

function touchOrClick(x,y) {
  mouse.x = (x - ox)/scale;
  mouse.y = (y - oy)/scale;
}

function swap() {
  dispCtx.drawImage(canvas, 0, 0, dispCanvas.width, dispCanvas.height);
}