The Mouse and the Canvas
Often times, the canvas seems like its own mysterious beast. It is not until you run into areas like events that aren’t specific to the canvas where you realize that all of this is just a small part of this larger JavaScript enclosure. For the next few sections, you are going to be learning general JavaScript 101 stuff about events, so feel free to skip or gloss over the material if you are intimately familiar with dealing with mouse events.
Meet the Events
Our canvas element works with all the mouse events that your browser exposes:
clickdblclickmouseovermouseoutmouseentermouseleavemousedownmouseupmousemovecontextmenumousewheel and DOMMouseScroll
What these events do should be somewhat easy to figure out given their name, so I won’t bore you with details about that. Let’s just move on to the next section where we learn how to listen to them.
Listening to and Handling Mouse Events
To listen for these events on your canvas element, use the addEventListener method and specify the event you are listening for and the event handler to call when that event is overheard:
Get hands-on with 1200+ tech skills courses.