Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Há algum problema?

Quando usa a função onclick eu vi 3 tipos de diferentes posições.

( Editado:

canvas.onclick = leftClick;

)

pageX, pageY
layerX, layerY
clientX, clientY

Interfere em alguma coisa usar algum diferente do pageX ? Tipo:

    function leftClick(event) {
      var x = event.layerX - canvas.offsetLeft;
      var y = event.clientY - canvas.offsetTop;
      var keyDown = event.shiftKey; // da pra economizar essa linha
      if(keyDown == true) {
        radius = 20;
      } else { radius = 10 };
      drawDrop(x, y, radius)
    }

Ele funcionou, mas vai interferir em algum momento?

3 respostas
solução!

Todas retornam valores de coordenadas, mas são informações diferentes, e nem sempre trarão os mesmos resultados com uma simples substituição.

pageX/Y e clientX/Y consideram como ponto de referência o canto superior esquerdo do navegador. A diferença entre as duas é que pageX/Y considera toda a página renderizada (por exemplo, se sua página for "alta" ou "larga" demais para mostrar na tela, tendo a barra de rolagem para ver o conteúdo acima e abaixo e pros lados, ela vai considerar estas áreas ocultas também). Então se, por exemplo, rolar a página para baixo, o valor de pageY vai aumentando para valores acima dos limites da sua tela no navegador (suponha que ela tem 600 pixels de altura, o pageY pode retornar um valor maior que isto, se sua página for rolando para baixo. É relativo às dimensões da sua página criada, relativo ao html.

Já clientX/Y só retorna valores dentro dos limites da tela do seu navegador (suponha que sua tela no navegador tenha 1100 x 600 pixels, os valores retornados por clientX/Y estarão sempre entre estes limites) mesmo que sua página seja maior que a tela. É relativo ao campo de visão fixa da sua tela do navegador. Relativo ao viewport.

Agora screenX/Y tem como referência o canto físico do dispositivo (tela do monitor, notebook ou outro dispositivo, não do navegador. Relativo ao dispositivo.

Apenas marquei como solucionada. Obrigado pela resposta!

De nada Ryan! Bons estudos!