So far in this module you have used the Canvas 2D context to draw shapes, paths, text, and images. Those drawings are static: once a pixel is painted, the canvas has no memory of the shape that produced it. Interactive canvas work builds on that fact. Because canvas is an immediate-mode surface, anything that needs to move or respond to the user must be modeled in JavaScript variables, cleared from the screen, and drawn again from scratch on every frame.
This topic brings together three ideas. First, event handling: attaching listeners such as mousedown, mousemove, or click to the canvas element and converting the event's page coordinates into canvas coordinates, usually with getBoundingClientRect() and an awareness of the canvas's CSS size versus its drawing-buffer size. Second, the animation loop: using requestAnimationFrame so redraws are synchronized with the browser's refresh rate instead of being guessed at with setInterval. Third, code structure: keeping setup, state, input handling, and rendering in separate functions so the program stays readable as it grows.
The videos below approach these ideas from different angles — a particle system that manages many moving objects, a focused explanation of requestAnimationFrame, and a small complete interactive project. As you watch, pay attention to where each author stores state, where the clearing happens, and what runs once at setup versus what runs on every frame. Those distinctions are the heart of this topic, and they carry over directly to whatever interactive canvas project you build.
This episode from The Coding Train's Nature of Code series adds an Emitter class on top of an existing particle system, so that a sketch can manage several independent groups of particles at once. Based on the title and description, it demonstrates organizing an array of particles into an object with its own update and display behavior, then creating multiple emitters in one p5.js sketch. The examples are written in p5.js, which wraps the same underlying HTML5 Canvas you use directly in this course.
It is a clear, practical model of structuring interactive canvas code: state lives in objects, and each frame the program updates and redraws everything, which is exactly the immediate-mode mindset this topic teaches. Daniel Shiffman is a widely trusted instructor for creative coding, and the emitter pattern maps naturally onto event-driven work such as spawning particles where the mouse is clicked.
A short, focused tutorial on animation fundamentals in JavaScript and how requestAnimationFrame drives them. The description indicates the instructor builds up an animated example step by step, so you should expect to see the loop pattern in which a draw function updates position values and then schedules itself for the next frame. Expect discussion of why the browser's frame callback is used rather than fixed timers.
It targets the requestAnimationFrame subtopic directly and at the right level of detail, giving you the loop skeleton you will reuse in every dynamic canvas sketch, including the clear-then-redraw cycle that dynamic graphics require.
A compact project walkthrough that builds an interactive animation with HTML, CSS, and JavaScript in which balloons float upward and pop when the user interacts with them, using a confetti effect on canvas. It shows an end-to-end small application rather than an isolated technique, so you can see markup, styling, event wiring, and animation assembled together. Note that part of the visual effect comes from a canvas-confetti library rather than hand-written drawing code.
It illustrates the payoff of this topic — user input translated into a visual response on screen — and gives you a concrete example of connecting events to animated graphics, which is useful as a model for scoping your own small interactive project.
Together these videos reinforce the second half of the module's outcomes. The requestAnimationFrame tutorial supplies the frame loop required by MO4 and makes concrete the clear-and-redraw cycle that MO3 asks you to explain, since animation on an immediate-mode surface is impossible without it. The balloon-popping project shows event listeners driving visual change, supporting the input-response half of MO4, while The Coding Train's emitter episode models the separation of initialization, state, update, and rendering responsibilities that MO5 asks you to evaluate. All three assume a working canvas and drawing context (MO1, MO2) and extend that foundation toward interactive, animated graphics; you should still practice the raw coordinate-translation math and direct 2D-context calls in your own code, as the videos emphasize structure and motion more than the Canvas API syntax itself.
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.