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>