带画布偏移的javascript绘图

首先，我很抱歉又问了一个问题。我知道stackoverflow有很多相关的问题，但我仍然无法解决我的问题

当我绘制到画布时（请参见下面的代码），它不会在鼠标光标下绘制。它向右和向下偏移。我希望它能在鼠标光标下开始绘制

我是否需要使用以下任何属性：画布偏移？事件偏移量？ClientX？LayerX？偏左？越位

move: function(event) {
  this.prevX = this.currX;
  this.prevY = this.currY;

  this.currX = event.clientX;
  this.currY = event.clientY;

  if (this.drawing) {
    this.ctx.lineTo(this.currX, this.currY);
    this.ctx.stroke();
  }
}

有人能纠正下面JSFIDLE中的错误并解释为什么它会这样工作吗

JavaScript使用vue.js。这就是我现在所学的。如果你不熟悉它，就假装它不在那里。您将看到您可以访问画布和上下文变量--

this.canvas

，

this.ctx

非常感谢

更新线条的绘制速度明显快于鼠标的移动速度

解决了用高度和宽度属性替换样式高度和宽度属性所需的问题

style=“height:500px”width:500px”

-->

height=“500”width=“500

引用vuejs论坛上给出的有用答案：

这样做的目的是从画布的原始（默认）大小向上缩放画布，以匹配指定的宽度/高度（就像调整图像大小一样，它会扭曲）。这是同样的问题。这就是为什么当鼠标向右移动时，它会越来越远，因为这是一种复合效应

---

当您试图在画布上绘制时，您遇到了什么问题？应该发生什么？它不是在鼠标下绘制的。它向右移并向下移动。画布本身的定位存在问题。鼠标位置正确。但我不确定这里出了什么问题。在纯svg中，我还发现了一个令人惊叹的例子：@alpham8当我看到矩阵时，我的眼睛变得呆滞……为了在Vuejs中实现签名，我使用了signature_pad。检查一下：当你试图在画布上画画时，你遇到了什么问题？应该发生什么？它不是在鼠标下画画。它向右移并向下移动。画布本身的定位存在问题。鼠标位置正确。但我不确定这里出了什么问题。在纯svg中，我还发现了一个令人惊叹的例子：@alpham8当我看到矩阵时，我的眼睛变得呆滞……为了在Vuejs中实现签名，我使用了signature_pad。过来看：