When you want to make your canvas interactive, you need to capture user actions such as mouse clicks, movement, and even keyboard presses. Event listeners attached to the canvas element allow you to respond to these actions. Mouse events like click, mousedown, mouseup, and mousemove provide an event object with useful properties. The most common properties for canvas interaction include:

• offsetX and offsetY: give the mouse position relative to the top-left corner of the canvas;
• button: tells you which mouse button was pressed (0 for left, 1 for middle, 2 for right);
• ctrlKey, shiftKey, altKey: indicate whether these modifier keys are pressed.

It is important to use offsetX and offsetY for accurate positioning on the canvas. Properties like clientX and pageX refer to positions relative to the browser window or the full page, not the canvas itself. Mapping the event's coordinates to the canvas space ensures your drawings or interactions appear exactly where the user expects. If your canvas is scaled or transformed, you may need to adjust these coordinates accordingly.

You can also listen for keyboard events to control elements on your canvas. By responding to keydown or keyup events, you can move shapes, trigger actions, or change visual states. Combining mouse and keyboard input lets you create richer, more dynamic interactions. For instance, you might let users draw with the mouse while holding a key to switch colors, or move a character with the keyboard and interact with objects using the mouse. This combination forms the basis for interactive games, drawing tools, and creative visualizations.