In this recipe, we'll get to the meat of the Events
class by defining regions and adding event listeners to them. We'll draw a triangle, attach a mouseout
and mousemove
event listener to it, we'll draw a rectangle with no event listeners, and finally we'll draw a circle and attach a mouseover
, mouseout
, mousedown
, and mouseup
event listener to try out each of the different desktop event listeners supported by the Events
class.
Follow these steps to draw a triangle, a rectangle, and a circle, and then attach mouse event listeners to each shape:
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:window.onload...