Определение координат мыши в canvas

#javascript #html #canvas

Как определить значения x, y при нажатии мыши на ? И чтобы эти значения были
у переменой сразу.



var example = document.getElementById("example"),
        ctx = example.getContext('2d');
example.width = 300; //высота
example.height = 300; //ширина
for (x = 0; x < 300; x += 100) { //поле крестиков ноликов
    for (y = 0; y < 300; y += 100) {
        ctx.strokeRect(x, y, 100, 100);
    }
}
pic = new Image();
pic.src = "нолик.png";
//pic.onload = function() {
    //example.onmouseup = ctx.drawImage(pic, 101, 1);
//}
//нужна функция
Обновите браузер



    

Ответы

Ответ 1

example.addEventListener('mouseup', function (e) {
    var x = e.pageX - e.target.offsetLeft,
        y = e.pageY - e.target.offsetTop;
    ⁄⁄.......
});


Ответ 2

Решением из принятого ответа следует пользоваться с осторожностью, если масштаб элемента
(css zoom не работает в последних firefox) не 100%, то положение мыши относительно
логических пикселей в canvas сбивается, точнее так же масштабируется, как и элемент:



[...document.querySelectorAll('canvas')].forEach(canvas => {
  var ctx = canvas.getContext('2d');
  canvas.addEventListener('mousemove', function (e) { 
      var x = e.pageX - e.target.offsetLeft,
          y = e.pageY - e.target.offsetTop; 
      ctx.clearRect(0,0,100,100);
      ctx.beginPath();
      ctx.arc(x,y,5,0,Math.PI*2,true);
      ctx.stroke();
  });
});
canvas { border: 1px solid black; }






Бороться с этим можно вот так:

let z = window.getComputedStyle(canvas).zoom;     
var x = e.pageX/z - e.target.offsetLeft,
    y = e.pageY/z - e.target.offsetTop;




[...document.querySelectorAll('canvas')].forEach(canvas => {
      var ctx = canvas.getContext('2d');
      canvas.addEventListener('mousemove', function (e) {
          let z = window.getComputedStyle(canvas).zoom || 1;     
          var x = e.pageX/z - e.target.offsetLeft,
              y = e.pageY/z - e.target.offsetTop;
          ctx.clearRect(0,0,100,100);
          ctx.beginPath();
          ctx.arc(x,y,5,0,Math.PI*2,true);
          ctx.stroke(); 
      });
});
canvas {
    border: 1px solid black;
 }