The HTML5 Canvas element gives you a blank rectangle of pixels in the browser and a JavaScript drawing context (usually obtained with getContext('2d')) that lets you paint on it. Everything a player sees in a Canvas game — the background, the character, the obstacles, the score text — is drawn by your code, one shape or image at a time, and then erased and drawn again a fraction of a second later. There is no DOM element for the player's character; there is only what you drew on the most recent frame.
In this module that matters because Canvas drawing is the output half of your game. You will set up the canvas and its size, establish the coordinate grid (origin at the top-left, x increasing to the right, y increasing downward), layer a background, draw rectangles and images for obstacles and objects, and cut frames out of a sprite sheet with drawImage to animate a character. Then you will clear the canvas with clearRect and redraw everything so that motion appears smooth rather than smeared.
As you watch the videos below, pay attention to a few recurring details: how the canvas is created and sized in HTML versus in JavaScript, how each drawing call translates numbers into positions on screen, the order in which things are drawn (background first, foreground last), and where the clear-and-redraw step sits inside the animation loop. Try pausing and recreating small pieces in your own file — a filled rectangle, an image at a given x and y — before attempting a full game.
A walkthrough of building a complete Stick Hero-style game using plain JavaScript and the HTML Canvas 2D context. Based on the title and description, it covers setting up the canvas, drawing the game world (platforms, the stick, the character) as shapes, and redrawing the scene as the game state changes. It is a condensed, project-oriented tutorial rather than a reference lecture.
Because the whole game is drawn with Canvas primitives, it is a strong demonstration of the coordinate grid, layered drawing, and clear-and-redraw cycle in a real project; Hunor Márton Borbély is known for clean, well-explained Canvas game tutorials.
The opening part of a series on recreating a Street Fighter style game with JavaScript and HTML Canvas. This first episode focuses on the plan for the project and the tooling and setup needed to get started, which typically includes creating the canvas element, sizing it, and getting the 2D rendering context before anything is drawn. It frames the scope of the game before code is written.
It models the "set up the canvas element and plan the game first" step that opens this topic, and it previews how background, characters, and objects will later be rendered in the same drawing surface.
A focused tutorial on sprite animation in JavaScript using the Canvas element, part of a larger game-building series. It deals with sprite sheets — single images containing multiple animation frames — and how to draw the correct frame onto the canvas so a character appears to move. Expect discussion of frame indices, source rectangles, and timing the frame changes.
This is the most direct coverage of rendering character sprites, and it shows why the canvas must be cleared and redrawn each frame for animation to look right rather than leave trails.
Together these videos build the drawing layer that the module's outcomes depend on. The Street Fighter intro supports MO1 by showing a game being scoped and set up before code is written; the Stick Hero build and the sprite animation episode both demonstrate the clear-update-redraw cycle at the heart of MO2, including how every visible element is re-rendered on each frame. Watching complete game projects also previews MO3 through MO5, since input handling, collision and scoring logic, and final assembly all operate on the same entities and coordinates you learn to draw here; master the drawing and the grid first, and the later subsystems have something concrete to act on.
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.