Pracowałem nad zdarzeniami dotykowymi i trochę kodu działa całkiem dobrze, dopóki płótno nie uruchomi się w lewym górnym rogu. Jak tylko dodam coś przed nim, raportowane zdarzenie zostanie przesunięte o położenie płótna.

Określam to, rysując krąg wokół miejsca, gdzie był dotyk. Okrąg jest zawsze przesunięty o przesunięcie płótna z lewego górnego rogu ekranu.

Patrząc na zdarzenie przy starcie dotykowym, widzę, że dostępna jest strona (w chrome, używając debugowania USB). Ale kiedy go szukam, wygląda na to, że nie jest to część standardu i wydaje się, że jest jakaś sprzeczka, że ​​może zostać zdeprecjonowana (choć nie mogę się tego dowiedzieć).

Więc moje pytanie brzmi: jaka jest najlepsza metoda radzenia sobie z tą przeglądarką (główne problemy to safari i chrom, tj. Webkit, firefox to miło mieć)?

Ten sam problem występuje w przypadku zdarzeń myszy, dla których stworzyłemJSFiddle tego problemu. Jednak nie jestem pewien, czy te same atrybuty są dostępne dla zdarzeń myszy i zdarzeń dotykowych.

Powinienem zauważyć, że zdaję sobie sprawę z tego, że mogę utrudnić kodowanie offsetu, a problem został rozwiązany, jednak szukam rozwiązania, które wykorzystywałoby dostępne informacje bez konieczności stosowania żadnego kodu przewodowego specyficznego dla mojego HTML.

Aby odtworzyć JSFiddle, HTML, CSS i Javascript są następujące:

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