Getting correct mouse position in a CSS scaled canvas

Question

I have been trying to take the logic of a couple simple MooTools operations and convert it to work with jQuery.

The logic I want is for this jsfiddle what it allows is to get accurate mouse position on a canvas element with css resizing.

I found the answer here on SO I have been working for a couple hours with no avail

I think I understand his logic but fitting for some reason I am not seeing results

Here is what I have done so far with arby's logic from his answer commented out

// Get the change ratio for the new css set size
//var cssScale = [canvas.getSize().x / canvas.get('width'), canvas.getSize().y / canvas.get('height')];
var cssScale = [$('canvas').height() / $('canvas').attr('height'), $('canvas').width() / $('canvas').attr('$('canvas').height() / $('canvas').attr('height'),')]

//Create an object of the dimensions
// I think from my looking at the jsfiddle x&y is the position of the rect in his canvas
// and w&h are the height and width of that rect so it's not really necessary for my problem which
// is just getting mouse cords accuratly.
//this.setDims(x*cssScale[0], y*cssScale[1], w*cssScale[0], h*cssScale[1]);

// This is the offset of the clickable square in his code.
//this.offset = [x - this.dims[0], y - this.dims[1]];

// Now I do not know what this is
// If the offset is just for position in their code why is it used here
// How can you display just scaled mouse position
this.x = (x - this.offset[0]) / cssScale[0] + w * .5;
this.y = (y - this.offset[1]) / cssScale[1] + h * .5;

Answer 1

I've made a little demo using plain javascript. I've got a blog post explaning the process.

Take a look at the example with special note to where the variables sx and sy are being used. They're your scaling ratio. You'll basically need to apply this to any offsets within the canvas (i.e. mouse position in the screen minus the canvas offset).