Canvas 鼠标事件在使用通过 CSS 调整大小时延迟

Question

我正在玩一个项目，以了解有关 node.js 和 html 画布的更多信息。

在我的项目中，我有一个 canvas 我想保持固定的 bitmap 大小，但在保持其纵横比的同时填充其包含的 div。

我已将 500x500 的大小应用于我的 canvas 元素，然后在 CSS 中应用以下样式。

canvas {
  display: block;
  width:100%;
  height:100%;
  object-fit: contain;
  background-color: lightgrey;
}

在 javascript 内部最初填充 canvas 白色，所以我得到类似下面的东西，到目前为止一切都很好。

我挂钩鼠标事件并使用它们来绘制线条。 我使用下面的 function 将事件正确缩放到 canvas。

function  getMousePos(evt) {
  var rect = canvas.getBoundingClientRect(); // abs. size of element

  var raw_x = evt.clientX||evt.touches[0].clientX;
  var raw_y = evt.clientY||evt.touches[0].clientY;

  var min_dimension = Math.min(rect.width,rect.height);
  var x_offset = 0.5*(rect.width-min_dimension);
  var y_offset = 0.5*(rect.height-min_dimension);

  return {
    x: ((raw_x - rect.left - x_offset) / min_dimension) * canvas.width,
    y: ((raw_y - rect.top - y_offset) / min_dimension) * canvas.height
  }
}

这可行，但是在 canvas 上绘图时，当鼠标移动到图像右侧的带上时，它不会更新，直到鼠标离开带为止。 乐队与 canvas 左侧的空间大小相同，所以我认为它是相关的，但我不知道如何调查。 如果我调整 window 的大小直到 canvas bitmap 两侧没有空间，我没有问题（并且性能要快得多）。 下面的 gif 应该让事情更清楚。

有没有人对可能导致这种情况的原因提出建议，或者有更好的方法让我达到同样的效果。

注意：我正在运行 chrome 版本 80.0.3987.149

Answer 1

对于遇到此问题的其他人，我找不到一个好的解决方案，除了在 window 调整大小事件发生时使用 JavaScript 调整元素大小。