Mouse Events to get X, Y Coordinates on Canvas

<script>
$(document).ready(function() {
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
////////// mouser up event ////////////
$('#my_canvas').on('mouseup', function(e){
  var rect = my_canvas.getBoundingClientRect();
     x1 = e.clientX - rect.left;
	 x1=x1.toFixed(0);
     y1 = e.clientY - rect.top;
	 y1=y1.toFixed(0);
	 
// display inside a div tag
$("#t1").append("mouseup X : "+x1 + " , Y : "+y1 + "<br>"); 
 });
///////////// mouse down event ///////////
$('#my_canvas').on('mousedown', function(e){
  var rect = my_canvas.getBoundingClientRect();
     x1 = e.clientX - rect.left;
	 x1=x1.toFixed(0);
     y1 = e.clientY - rect.top;
	 y1=y1.toFixed(0);
$("#t1").append("mousedown X : "+x1 + " , Y : "+y1 + "<br>"); 
 });
///////////// mouse click event ////////
$('#my_canvas').on('click', function(e){
  var rect = my_canvas.getBoundingClientRect();
     x1 = e.clientX - rect.left;
	 x1=x1.toFixed(0);
     y1 = e.clientY - rect.top;
	 y1=y1.toFixed(0);
$("#t1").append("click X : "+x1 + " , Y : "+y1 + "<br>"); 
 });
/////////////
///////////// 
/*
$('#my_canvas').on('mousemove', function(e){
  var rect = my_canvas.getBoundingClientRect();
     x1 = e.clientX - rect.left;
	 x1=x1.toFixed(0);
     y1 = e.clientY - rect.top;
	 y1=y1.toFixed(0);
$("#t1").append("mousemove X : "+x1 + " , Y : "+y1 + "<br>"); 
 });
 */
/////////////
})
</script>