Javascript 光标不跟随html5画布中绘制的矩形的位置

我有以下代码，可以在画布上绘制矩形：

要在画布上绘制矩形，请单击图像，然后拖动鼠标

要重现我的问题，请执行以下步骤：

var shape = new Shape(mouseDownX - canvasOffset.left, mouseDownY - canvasOffset.top, mouseX - mouseDownX, mouseY - mouseDownY, color);

• 画一个矩形，就像上面提到的那样
• 然后单击添加文本按钮
• 现在尝试绘制另一个矩形，您将看到光标与矩形的方式不同

即使我动态添加或删除页面上的任何元素，如何使代码正常工作

我试着这样做：

var shape = new Shape(mouseDownX - canvasOffset.left, mouseDownY - canvasOffset.top, mouseX - mouseDownX, mouseY - mouseDownY, color);

但没有解决它

---

更新新职位之类的方法可以解决问题，但不知道如何处理。

请查看此处的解决方案：

问题是，您没有计算相对于画布位置的PageX和PageY，而是计算给您错误坐标的整个页面

我刚刚改变了这些：

mouseDownX = e.pageX;
mouseDownY = e.pageY;

为此：

mouseDownX = e.pageX - this.offsetLeft;
mouseDownY = e.pageY - this.offsetTop;

更新

对于其他一些情况，您应该在画布上使用getBoundingClientRect（）方法来获取元素相对于视口的位置，如下面的JSFIDLE所示：sfiddle.net/dkboaq7p/2

//获取元素的相对位置

var canvasPosition=document.getElementById("canvas").getBoundingClientRect();

  mouseDownX =  e.pageX - canvasPosition.left;
  mouseDownY =  e.pageY - canvasPosition.top;

---

检查下面的解决方案：）这并没有完全解决问题，请在这里查看相同的脚本，但仍然存在问题：jsfiddle.net/dkboaq7p/1再次检查您提供的第一个和第二个示例是不同的cases@YehiaAwad检查最后一个案例，这是我想要解决的问题。这并没有完全解决问题，请在此处查看相同的脚本，但仍然存在问题：@JisMaxi请在此处查看：，添加一个矩形，然后单击

隐藏文本

，再次尝试添加矩形，您将再次看到问题。尝试解决最后一个问题。。。我认为，就像我在文章中写的那样，解决方案必须在隐藏

#thediv

后获得新的偏移量（以这种方式查看）。