S2JS - Rotating, flipping, pointing - another game : Keeping track of the mouse 2

The next step is to get those mouse variables updating when we wave the mouse around.

We do that by adding an event listener, and declaring a function that gets called every time a mouse move event occurs. The function calculates the correct coordinates within the canvas, and stores them in the variables.

If this sort of code seems a bit confusing and unfamiliar, you may need to go back and review Sensing the mouse and touches.

Move the mouse over the canvas and check the numbers change correctly.

<html> <body> <canvas id="myCanvas" width=300 height=300 style="background-color:MediumSeaGreen"> </canvas> <script> var ctx = myCanvas.getContext("2d"); // Get the drawing context for the canvas var FPS = 40; // How many frames per second var mouse_x = 0; var mouse_y = 0; // Where is the mouse function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // clear the frame ctx.font="25px Arial"; ctx.fillText("Mouse is at " + mouse_x + ", " + mouse_y, 0, 20); } function MyMouseMoveHandler (MyEvent) { var rect = myCanvas.getBoundingClientRect(); mouse_x= MyEvent.clientX - rect.left; mouse_y= MyEvent.clientY - rect.top; } addEventListener("mousemove", MyMouseMoveHandler); setInterval(Do_a_Frame, 1000/FPS); // set my frame renderer </script> </body> </html>