Click in Canvas está a três pixels de distância

Question

Apr 13, 2015, 04:30 PM

html html5-canvas coordinates mouseclick-event

Click in Canvas está a três pixels de distância

Passei o dia inteiro tentando clicar na minha tela para retornar o deslocamento do pixel xy. Que missão tem sido essa!

Isto é o que eu acabei com:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

  <div id="logX">x</div>
  <div id="logY">y</div>

  <div style="margin-left:100px">
    <div style="margin-left:100px">
      <canvas id="myCanvas" width="100" height="1000" style="border:20px solid #000000;"></canvas>
    </div>
  </div>

  <script>
  var canvas = document.getElementById('myCanvas');
  canvas.addEventListener('click', on_canvas_click, false);

  function getNumericStyleProperty(style, prop) {
    return parseInt(style.getPropertyValue(prop),10);
  }

  function on_canvas_click(ev) {
    var boundingRect = ev.target.getBoundingClientRect();

    var x = ev.clientX - boundingRect.left,
        y = ev.clientY - boundingRect.top;

    var style = getComputedStyle(canvas, null);

    x -= getNumericStyleProperty(style, "margin-left");
    y -= getNumericStyleProperty(style, "margin-top");

    x -= getNumericStyleProperty(style, "border-left-width");
    y -= getNumericStyleProperty(style, "border-top-width");

    x -= getNumericStyleProperty(style, "padding-left");
    y -= getNumericStyleProperty(style, "padding-top");

    $("#logX").text(        ev.target.getBoundingClientRect().left
                   + ", " + ev.clientX
                   + ", " + canvas.offsetLeft
                   + ", " + x
                  );

    $("#logY").text(        ev.target.getBoundingClientRect().top
                   + ", " + ev.clientY
                   + ", " + canvas.offsetTop
                   + ", " + y
                  );
  }

  //$( document ).on( "mousemove", function( event ) {
  //$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
  //});
</script>
</body>
</html>

http://jsbin.com/xajeluxija/2/

Produz uma tela branca dentro de uma borda preta grossa.

Clique na tela e ele exibirá as coordenadas XY.

Como você pode ver, estou criando deliberadamente uma tela que requer rolagem e não está alinhada à esquerda. Isso é forçar uma solução robusta. (O caso de teste pode ser aprimorado?)

Quase funciona! Mas se você tentar clicar no canto superior esquerdo, receberá (1,2).

Deve ser (0,0).

O que está acontecendo de errado?

EDITAR:obtendo a posição do mouse em relação à área de conteúdo de um elemento - esta pergunta possui uma excelente resposta (junto com um exemplo ao vivo) que ainda apresenta o mesmo problema de deslocamento.

Como obtenho as coordenadas de um clique do mouse em um elemento da tela? <- esta questão está irremediavelmente confusa.

http://miloq.blogspot.in/2011/05/coordinates-mouse-click-canvas.html <- também exibe o mesmo comportamento.

Obtendo a posição do cursor em uma tela sem jQuery <- usadocument.documentElement que pode ser uma alternativa ao manuseio com margem / borda / preenchimento de CSS (?)

EDIT: Agora é 2,2, não 2,1! É inconsistente! ARGH! Tirei fotos com minha câmera:

EDIT: No Firefox, recebo 0,75, 1,91667 ...

EDIT 15Apr: Duas tentativas aqui:
http://jsfiddle.net/Skz8g/47/
http://jsbin.com/taceso/1/