MOUSEMOVE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>activity</title>
</head>

<body>

    <canvas id="myCanvas" width="640" height="480" style="border: 1px solid black"></canvas>

<script>
 var canvas = document.getElementById("myCanvas");
    var drawingTools = canvas.getContext("2d");

     //call the line draw function when the mouse is moved
document.addEventListener("mousemove", lineDraw);

    function lineDraw()
    {
        //clear everything on the canvas
        drawingTools.clearRect(0, 0, canvas.width, canvas.height);
        drawingTools.fillStyle="red";
        drawingTools.strokeStyle = "black";
        drawingTools.lineWidth = 2;
        drawingTools.beginPath();
        drawingTools.moveTo(0, 0);
        drawingTools.lineTo(canvas.width, 0)
        //use methods to specify the cordinates of the mouse position
        drawingTools.lineTo(event.clientX, event.clientY);
        drawingTools.closePath();
        drawingTools.stroke();
        drawingTools.fill();


    drawingTools.strokeStyle = "black";
        drawingTools.fillStyle="green";
        drawingTools.lineWidth = 2;
        drawingTools.beginPath();
        drawingTools.moveTo(640, 0);
        drawingTools.lineTo(canvas.width, canvas.height)
        //use methods to specify the cordinates of the mouse position
        drawingTools.lineTo(event.clientX, event.clientY);
        drawingTools.closePath();
        drawingTools.stroke();
        drawingTools.fill()


    drawingTools.strokeStyle = "black";
        drawingTools.fillStyle = "yellow"
        drawingTools.lineWidth = 2;
        drawingTools.beginPath();
        drawingTools.moveTo(0, 480);
        drawingTools.lineTo(canvas.width, canvas.height)
        //use methods to specify the cordinates of the mouse position
        drawingTools.lineTo(event.clientX, event.clientY);
        drawingTools.closePath()
        drawingTools.stroke()
        drawingTools.fill()


    drawingTools.strokeStyle = "black";
        drawingTools.fillStyle="blue"
        drawingTools.lineWidth = 2;
        drawingTools.beginPath();
        drawingTools.moveTo(640, 480);
        drawingTools.lineTo(0, canvas.width)
        //use methods to specify the cordinates of the mouse position
        drawingTools.lineTo(event.clientX, event.clientY);
        drawingTools.closePath()
        drawingTools.stroke()
        drawingTools.fill()
    }


</script>
</body>

</html>