Currently i am doing a school project, i want to do a mouse over on canvas element which is the draw image motion to display the date and time in my sql database

Currently i am doing a school project, i want to do a mouse over on canvas element which is the draw image motion to display the date and time in my sql database

<script>
window.onload = function() {

var outputx = <?php echo json_encode($outputx) ?>;
var outputy = <?php echo json_encode($outputy) ?>;
var outputid = <?php echo json_encode($outputid) ?>;

    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    
    var backgdImg=document.getElementById("bg");
    var motion=document.getElementById("mt");    

var pat=ctx.createPattern(backgdImg,"repeat");
ctx.rect(0,0,1020,600);
ctx.fillStyle=pat;
ctx.fill();
var i = 0;
        var latestSensorID= 3;
        ctx.font = "20px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";

      while (i<outputid.length)
 {
         if (outputid[i] == latestSensorID) 
ctx.drawImage(latest,outputx[i] - 20,outputy[i] - 20,45,45);
else  
ctx.drawImage(motion,outputx[i] - 20,outputy[i] - 20,45,45);  
i++;
 }
}; 
</script>