In this recipe, we'll attach event listeners to images. As we can only attach event listeners to paths with our Events
class, and as images drawn on the canvas aren't classified as paths, we can create a rectangular region that overlays an image in order to attach event listeners to the rectangular region, and consequently attach event listeners to the image.
Follow these steps to draw two different images and then attach mouseover
, mouseout
, mousedown
, and mouseup
event listeners to them:
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); }
Create an image loader that loads a set of images and then calls a
callback
function whenever all of the images have loaded:/* * loads...