Рисование полигонов на холсте с помощью мыши: проблема с координатами, когда div включен в дизайн сайта

Question

Я работаю с этим сценарием "Рисование полигонов с помощью мыши" , и он работает очень хорошо. У меня возникает проблема, когда я помещаю холст в дизайн моего сайта. Таким образом, холст теперь находится в относительном положении, а координаты неверны. У меня есть задержка между моим курсором и ничьей ...

Если я установлю div в положение: исправлено, проблем не будет.

Позиции объявлены следующим образом:

canvas.addEventListener("click", function(e) {
    var x = e.clientX-canvas.offsetLeft;
    var y = e.clientY-canvas.offsetTop;  

Как это исправить? Как поместить холст в мой дизайн и получить правильные координаты?

Большое спасибо!

Answer 1

Попробуйте мой "простой" код мыши (простой, потому что он не учитывает border / padding / HTML offset):

function getMouse(e, canvas) {
  var element = canvas, offsetX = 0, offsetY = 0, mx, my;

  // Compute the total offset
  if (element.offsetParent !== undefined) {
    do {
      offsetX += element.offsetLeft;
      offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
  }

  // This isn't the best code because I am not adding padding and border style widths to offset. I'm just keeping it simple.

  mx = e.pageX - offsetX;
  my = e.pageY - offsetY;

  return {x: mx, y: my};
}