Положение мыши на масштабированном холсте

Question

У меня есть холст со 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/

Редактировать: К вашему сведению: Firefox, похоже, не запускает jsfiddle должным образом из-за того, что jsfiddle работает очевидно. Попробуйте Chrome.

Answer 1

Я не уверен в том, что вы хотите, но здесь есть 2 возможных решения:

Первый позволяет правильно перемещать мышь в масштабированном холсте

http://jsfiddle.net/74CP8/1/

Второй позволяет нарисовать прямоугольник от верхнего левого угла до нижнего правого угла.

http://jsfiddle.net/74CP8/2/

Ваша проблема была здесь:

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

Вы использовали x & y как проценты, тогда как вам нужны его как пиксели.

Не стесняйтесь, если у вас есть другие вопросы.