如何通过javascript确定触摸事件(或鼠标事件)中的真实xy坐标

我一直在处理触摸事件，并且有一些代码工作得很好，直到画布不再从左上角开始。只要我在它之前添加任何东西，报告的事件就会被画布的位置偏移。

我通过在触摸位置周围画一个圆圈来确定这一点。圆圈总是被画布与屏幕左上角的偏移量所偏移。

查看触摸启动事件，我可以看到有一个pageY可用(在chrome中，使用usb调试)。但当我在谷歌上搜索它时，它似乎不是标准的一部分，而且似乎有一些争论认为它可能被低估了(尽管我找不到这样或那样的方式)。

所以我的问题是什么是最好的跨浏览器的方法来处理这个(主要关注的是safari和chrome，即webkit, firefox是一个很好的有)?

鼠标事件也会出现同样的问题，为此我创建了该问题的JSFiddle。然而，我不确定相同的属性是否适用于鼠标事件和触摸事件。

我应该注意，我知道我可以硬编码偏移量，问题就解决了，但是我正在寻找一种解决方案，使用手头的信息，而不需要任何特定于我的html的硬连线代码。

要重新创建JSFiddle, HTML、CSS和Javascript如下所示:

<div class="title"></div>
<div class="container">
  <canvas id="myCanvas"></canvas>
</div>

CSS:

body {
  background-color: #ff0000;
  margin: 0px;
}
canvas {
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  background-color:#000;
}
.title {
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 40px;
  background-color: #888;
}
.container {
  width:auto;
  text-align:center;
  background-color:#777;
  width:100%;
  position:absolute;
  top:40px;
  left:0px;
  bottom:0px;
}

Javascript:

var onMouseDown = function(e) {
    draw(document.getElementById('myCanvas').getContext('2d'), e.clientX, e.clientY);
}
$(function () {
    document.getElementById('myCanvas').addEventListener('mousedown', onMouseDown, false);
});

function draw(ctx, x, y) {
ctx.canvas.width = ctx.canvas.offsetWidth; 
ctx.canvas.height = ctx.canvas.offsetHeight;      
  var radius = 50;
  var lineWidth = 15;
  var r = 255;
  var g = 75;
  var b = 75;
  var a75 = 0.05;
  var adj = Math.abs(lineWidth / 2);
  rad = radius + adj;
  var stop1 = (rad - lineWidth) / rad;
  var stop2 = 0;
  var stop3 = stop1 + (1 - stop1) / 2;
  var stop4 = 0;
  var stop5 = 1;
  stop2 = stop3 - (stop3 - stop1) / 2;
  stop4 = stop3 + (stop5 - stop3) / 2;
  var radgrad = ctx.createRadialGradient(x, y, 0, x, y, rad);
  radgrad.addColorStop(stop1, 'rgba(' + r + ',' + g + ',' + b + ', 0)');
  radgrad.addColorStop(stop2, 'rgba(' + r + ',' + g + ',' + b + ', .4)');
  radgrad.addColorStop(stop3, 'rgba(' + r + ',' + g + ',' + b + ', 1)');
  radgrad.addColorStop(stop4, 'rgba(' + r + ',' + g + ',' + b + ', .4)');
  radgrad.addColorStop(stop5, 'rgba(' + r + ',' + g + ',' + b + ', 0)');
  ctx.fillStyle = radgrad;
  ctx.arc(x, y, rad, 0, 2 * Math.PI, true);
  ctx.fill();
}

        var offsets = recursiveOffsetLeftAndTop(canvas);
        var x = evt.targetTouches[0].pageX - offsets.offsetLeft;
        var y = evt.targetTouches[0].pageY - offsets.offsetTop;