javascript - Mouse position on scaled canvas -

i have canvas 100% width , height.

it part of remote desktop working on. stuck because mouse position not reflect position on canvas correctly.

when send data desktop have compensate different screen sizes.

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

however when try draw on canvas x , z values not getting correct positions.

the reason need canvas / trying use percentage is going overlay on top of video. , user has draw rectangle around video offset because videos display black sidebars aspect ratios.

here example of canvas not put rectangle in right position:

http://jsfiddle.net/74cp8/

edit: fyi: firefox not seem run jsfiddle due way jsfiddle works apparently. try chrome.

i'm not sure of want, here 2 possible solutions :

the first allows move correctly mouse in scaled canvas

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

the second allows draw rectangle top left corner bottom right corner.

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

your problem here :

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

you used x & y percentages whereas need pixels.

don't hesitate if have other questions.