鼠标在缩放画布上的位置

我有一块100％width和的帆布height。

它是我正在使用的远程桌面的一部分。目前，我陷入困境是因为鼠标位置无法正确反映画布上的位置。

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

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

但是，当我尝试使用这些x和z值在画布上绘制时，我没有得到正确的位置。

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

这是一个未将矩形放置在正确位置的画布示例：

http://jsfiddle.net/74CP8/

编辑：仅供参考：由于jsfiddle的工作方式明显，Firefox似乎无法正确运行jsfiddle。尝试使用Chrome。