Javascript 更改css中画布元素父div的位置会扭曲图形

我有一个简单的画布绘制程序，工作非常完美

但是当我想在我的网页上使用它时，我必须定位它。我需要canvas元素位于1个div元素中，并且我需要在css中定位该div元素。当我更改父div元素的位置时，我的画布窗口会定期移动，但当我尝试绘制时，光标的鼠标位置与屏幕上的线条不匹配

我想知道如何解决这个问题，以及如何将我的画布窗口正确放置在我想要的位置

这是一个画布程序，它可以正常工作（颜色按钮的位置不好，但无需担心）。 HjD7e->JSFIDLE id 这里是一个混乱的（光标位置不匹配）

---

S6Dhe->JSFIDLE id

由于您现在正在偏移多个元素，因此需要考虑新的位置。在定位父容器时，将所有定位放在那里并从画布本身删除额外的定位可能会更容易。使用：

#contain{
    position:absolute;
    top:300px;
    left:500px;
    width: 400px;
    height: 400px
    }

相反。从此处，将获取位置的代码更改为：

contain = document.getElementById('contain');
currX = e.clientX - contain.offsetLeft + window.scrollX;
currY = e.clientY - contain.offsetTop + window.scrollY;

也可以在窗口中滚动

---

这把小提琴正在演奏。（注意，仅在Firefox中测试）

请提供最少的代码来说明您的问题。我在JSFIDLE上添加了两个示例。一个在工作，另一个在寻找答案，这就是我一直在寻找的。我在互联网上找不到soultion每个人都说它只能用fabric js完成。