Demo of Mouse Postion on any object in Jquery
Click at different places inside the area marked n and see how X Y value changes
HTML
<canvas id="my_canvas" width="500" height="200" style="border:1px solid #000000;"></canvas>
<div id='t1' style="position:absolute;"></div>
jquery
<script>
$(document).ready(function() {
$('#my_canvas').click(function(){
var offset = $(this).offset();
var x=event.pageX-offset.left;
var y=event.pageY-offset.top;
x=x.toFixed(0); // Remove decimal places
y=y.toFixed(0);
$("#t1").html('You clicked at X position: '+x+ " , Y position: "+y);
});
})
</script>