Ich habe an Berührungsereignissen gearbeitet und Code funktioniert ganz gut, bis die Zeichenfläche nicht in der oberen linken Ecke beginnt. Sobald ich etwas davor hinzufüge, wird das gemeldete Ereignis um die Position der Zeichenfläche verschoben.

Ich bestimme dies, indem ich einen Kreis um die Stelle zeichne, an der sich die Berührung befand. Der Kreis wird immer um den Abstand der Leinwand von der oberen linken Ecke des Bildschirms versetzt.

Wenn ich mir das Ereignis für den Start per Berührung ansehe, kann ich feststellen, dass eine Seite Y verfügbar ist (innerhalb von Chrome mithilfe von USB-Debugging). Aber wenn ich es google, scheint es nicht Teil des Standards zu sein, und es scheint ein Streit darüber zu geben, dass es möglicherweise abgeschrieben wird (obwohl ich nicht in der einen oder anderen Weise herausfinden kann).

Meine Frage ist also, was die beste Cross-Browser-Methode ist, um damit umzugehen (Hauptsorgen sind Safari und Chrome, dh Webkit, Firefox ist eine nette Sache).

Das gleiche Problem tritt bei Mausereignissen auf, für die ich einJSFiddle des Problems. Ich bin mir jedoch nicht sicher, ob für Mausereignisse und Berührungsereignisse dieselben Attribute verfügbar sind.

Ich sollte beachten, dass ich den Offset fest codieren kann und das Problem gelöst ist. Ich suche jedoch nach einer Lösung, die die vorliegenden Informationen verwendet, ohne dass ein fest verdrahteter Code erforderlich ist, der für mein HTML spezifisch ist.

Um die JSFiddle neu zu erstellen, sind HTML, CSS und Javascript wie folgt:

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