canvas页面缩放后鼠标位置向下向右偏移

Canvas元素在HTML5中用于绘制图形，它默认是以用户坐标系统为基础的，这意味着当页面发生缩放（如通过CSS的`transform: scale()`）时，原点（0,0）的位置并没有改变，但像素之间的距离会相应放大或缩小。

当你在缩放后的canvas上尝试获取鼠标事件的位置时，如果按照屏幕像素值计算，鼠标的实际位置会相对于原始的视口位置有所偏移，表现为向下向右。这是因为浏览器实际上是在处理窗口内的视口坐标，而不是canvas自身的坐标。

解决这个问题的一种方法是，在收到鼠标事件时，你需要先将事件的屏幕坐标转换回缩放前的canvas坐标。可以使用以下步骤：

1. 获取鼠标点击屏幕坐标（event.clientX, event.clientY）。
2. 计算缩放比例，通常是基于`window.innerWidth`和`window.innerHeight`与canvas的实际宽度和高度的比例。
3. 使用这个比例，将屏幕坐标除以比例，得到在未缩放时的canvas坐标。

例如，JavaScript代码大致如下：

const canvas = document.getElementById('myCanvas');
canvas.addEventListener('mousedown', function(event) {
  const unscaledMouseX = event.clientX / window.devicePixelRatio;
  const unscaledMouseY = event.clientY / window.devicePixelRatio;
  // 然后在这里使用unscaledMouseX和unscaledMouseY进行绘图操作
});