用鼠标在画布上绘制多边形：站点设计中包含div时出现坐标问题

Question

I'm working with this script "Drawing polygons with the mouse" and it works very well. The issue I have is when I put the canvas in the design of my site. The canvas is thus now in relative position and the coords are wrong. I have a lag between my cursor and the draw…

If I set the div in position: fixed, there is no problem.

The positions are declared as follows:

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

How to fix this? How to put the canvas in my design and have the right coords?

Thank you very much!

Answer 1

Try my "simple" mouse code (simple because it does not take into account 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};
}