Mouse Events on Canvas ( JavaScript )

<script>
var my_canvas=document.getElementById("my_canvas");
var gctx=my_canvas.getContext("2d");

//my_canvas.addEventListener("click", click_event, false);
my_canvas.addEventListener("mouseenter", mouseenter_event, false);
my_canvas.addEventListener("mouseleave", mouseleave_event, false);
my_canvas.addEventListener("mouseup", mouseup_event, false);
my_canvas.addEventListener("mousedown", mousedown_event, false);
my_canvas.addEventListener("drag", drag_event, false);

function click_event(e) {
var rect = my_canvas.getBoundingClientRect();
     x1 = e.clientX - rect.left;
     y1 = e.clientY - rect.top;
document.getElementById("t1").innerHTML="click X= " +x1+", Y="+y1;
}
/////////
function mouseenter_event(e) {
var rect = my_canvas.getBoundingClientRect();
     x1 = e.clientX - rect.left;
     y1 = e.clientY - rect.top;
document.getElementById("t1").innerHTML="mouseenter  X= " +x1+", Y="+y1;
}
///////////////
/////////
function mouseleave_event(e) {
var rect = my_canvas.getBoundingClientRect();
     x1 = e.clientX - rect.left;
     y1 = e.clientY - rect.top;
document.getElementById("t1").innerHTML="mouseleave  X= " +x1+", Y="+y1;
}

/////////
function mouseup_event(e) {
var rect = my_canvas.getBoundingClientRect();
     x1 = e.clientX - rect.left;
     y1 = e.clientY - rect.top;
document.getElementById("t1").innerHTML="mouseup X= " +x1+", Y="+y1;
}
///////////////

/////////
function mousedown_event(e) {
var rect = my_canvas.getBoundingClientRect();
     x1 = e.clientX - rect.left;
     y1 = e.clientY - rect.top;
document.getElementById("t1").innerHTML="mousedown X= " +x1+", Y="+y1;
}
///////////////
/////////
function drag_event(e) {
var rect = my_canvas.getBoundingClientRect();
     x1 = e.clientX - rect.left;
     y1 = e.clientY - rect.top;
document.getElementById("t1").innerHTML="drag X= " +x1+", Y="+y1;
}
///////////////
</script>