To get our feet wet with the Events
class, we'll keep it simple by getting the mouse coordinates of the cursor using the getMousePos()
method from the Events
class and then displaying it in the top-left corner of the canvas. The getMousePos()
method returns the mouse coordinates relative to the canvas, which takes into account the offset position of the canvas relative to the page, and also the scroll position of the page.
Follow these steps to get the canvas mouse coordinates and display them in the upper-left corner of the canvas each time the mouse cursor moves:
Link to the
Events
class:<script src="events.js"> </script>
Define the
writeMessage()
function which writes out a message:<script> function writeMessage(context, message){ context.font = "18pt Calibri"; context.fillStyle = "black"; context.fillText(message, 10, 25); }
Instantiate a new
Events
object and get the canvas and context...