He estado trabajando en eventos táctiles y tengo algunos códigos que funcionan bastante bien, hasta que el lienzo no comienza en la esquina superior izquierda. Tan pronto como agrego algo antes, el evento informado se compensa con la posición del lienzo.

Determino esto dibujando un círculo alrededor de donde estaba el toque. El círculo siempre está desplazado por el desplazamiento del lienzo desde la esquina superior izquierda de la pantalla.

Mirando el evento para el inicio táctil, puedo ver que hay una página disponible (dentro de Chrome, usando la depuración de usb). Pero cuando lo busco en Google, parece que no es una parte del estándar y parece haber algún argumento de que se puede depreciar (aunque no puedo encontrar una forma u otra).

Entonces, mi pregunta es ¿cuál es el mejor método de navegador cruzado para lidiar con esto (las principales preocupaciones son safari y chrome, es decir, webkit, es bueno tener Firefox)?

El mismo problema ocurre con los eventos del mouse, para los cuales creé unJSFiddle del problema. Sin embargo, no estoy seguro si los mismos atributos están disponibles para eventos de mouse y eventos táctiles.

Debo tener en cuenta que soy consciente de que puedo codificar el offset y el problema está resuelto, sin embargo, estoy buscando una solución que use la información disponible sin necesidad de ningún código cableado específico para mi html.

Para recrear el JSFiddle, el HTML, CSS y Javascript son los siguientes:

<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();
}