A game is only a game when the player can act on it. Everything you have built so far — the Canvas drawing calls, the state object, the requestAnimationFrame loop — runs on its own schedule. Event handling is the bridge that lets a keypress, a click, or a finger tap reach into that loop and change what happens on the next frame.
In this topic you will attach listeners to the document or directly to the canvas element, read the properties the browser hands you (key codes and key names from keyboard events, coordinates from mouse events, touch lists from touch events), and convert those raw values into game-meaningful actions such as "move left," "fire," or "aim at this point." A common and important pattern is to record input into a state object rather than acting immediately inside the handler, so the game loop stays the single place where the world updates. You will also learn when to call preventDefault() to stop the browser from scrolling the page, selecting text, or firing a synthetic click when the player is really trying to play.
While watching the videos below, pay attention to three things: which element the listener is attached to, which event properties carry the information you need, and how the handler avoids doing too much work on its own. Mouse and touch coordinates in particular are reported relative to the viewport, so note any step that converts them into canvas coordinates — that conversion is something you will need in your own project.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.