Javascript 缩放画布上的鼠标位置

我有一张100%宽度和高度的画布

它是我正在使用的远程桌面的一部分。目前我被卡住了，因为鼠标位置不能正确反映画布上的位置

当我将数据发送到桌面时，我必须补偿不同的屏幕大小

var x = Math.floor( mouse.x / canvas.width * 100 ); 
var y = Math.floor( mouse.y / canvas.height * 100 );

但是，当我尝试使用

x

和

z

值在画布上绘制时，我没有得到正确的位置

我需要画布/我尝试使用百分比的原因是它将是视频顶部的覆盖。用户必须在视频周围画一个矩形以获得偏移量，因为视频通常会显示用于纵横比的黑色边栏

以下是未将矩形放置在正确位置的画布示例：

---

编辑：仅供参考：由于JSFIDLE的工作方式，Firefox似乎没有正确运行JSFIDLE。试试铬

我不确定您想要什么，但这里有两种可能的解决方案：

第一种方法允许您在缩放的画布中正确移动鼠标

第二个选项允许您从左上角到右下角绘制一个矩形

你的问题就在这里：

ctx.rect(x,y,x+10, y+ 10)

您使用x&y作为百分比，而需要将其作为像素

---

如果您还有其他问题，请不要犹豫。

可能会有所帮助，这是我写的一篇关于获取坐标的帖子，在使用css缩放时很有效。它们非常有效！谢谢你的回答！你能告诉我你不懂的部分吗？这样我就可以编辑我的问题了。我很高兴它适合你。我不确定用户是否必须单击，然后移动鼠标并释放单击来绘制矩形，或者只是按照我的解决方案2的建议绘制矩形。是的。这是最终目标。但我想我自己会发现的：pSorry但我还有一个问题。你如何处理补偿？0,0到鼠标位置工作正常。但在其他任何地方，rect都会比鼠标位置拍摄得更远。