The HTML5 canvas element is a blank drawing surface that does nothing on its own. Everything you see on a canvas is produced by JavaScript: you select the canvas element from the DOM, ask it for a 2D rendering context, and then issue drawing commands against that context. This topic walks through the first and most important set of those commands — the ones that put rectangles, circles, arcs, lines, and multi-sided shapes on the screen.
Along the way you will meet the two ideas that organize nearly all canvas drawing. The first is the path: you begin a path, move to a starting point, add segments or arcs, and then close it. The second is the fill-versus-stroke distinction: fillStyle and strokeStyle decide the colors, and fill() and stroke() decide whether a shape is painted solid or outlined. Rounded rectangles are a good test case because they combine straight line segments with arcs in a single path.
As you watch the videos below, pay attention to the setup sequence that appears at the start of every example — getElementById followed by getContext('2d') — and notice the order in which styling properties are set relative to the drawing calls. Also watch for coordinates: the canvas origin is the top-left corner, x increases to the right and y increases downward, and arcs are measured in radians rather than degrees. Getting comfortable with these conventions now will make the later work on text, images, animation, and mouse interaction much easier.
A short, focused introduction to the Canvas API as the JavaScript interface to the HTML5 canvas element. Based on its title and description, it covers how a script gains access to the canvas, how the canvas element hosts graphic content, and how drawing and image operations are issued from JavaScript. Expect the standard setup pattern — reference the canvas, retrieve the rendering context, then draw — demonstrated in a compact example.
At roughly four minutes it is an efficient primer on exactly the first subtopic, Setting Up the Canvas Context, which every other subtopic depends on. It frames canvas as an API you call rather than markup you configure, which is the correct mental model for this module.
Part one of a beginner-oriented tutorial that builds a small game using HTML and JavaScript on a canvas. Early parts of a project like this typically establish the canvas element, obtain the 2D context, and draw the first simple shapes that represent game objects. It is a worked example rather than a reference lesson, so the drawing calls appear in the context of a real page.
Seeing rectangles and simple filled shapes used as actual game objects reinforces how fillStyle, fillRect, and coordinate placement work together in practice. The beginner framing keeps the pace approachable for students new to the Canvas API.
Reviewing this installment a second time is useful for tracing the drawing calls specifically, separate from the game logic. Pause on each line that touches the context object and identify which shape method and which style property it uses.
A targeted second pass helps isolate the Canvas API calls — fill and stroke styles, rectangles, and paths — from the surrounding application code, supporting the separation-of-concerns habits emphasized in this module.
Together these videos move from the minimal setup required by MO1 — embedding the canvas, selecting it with JavaScript, and retrieving the 2D rendering context — to the shape and styling work described in MO2, where fill and stroke properties are applied to rectangles, arcs, and paths. The two-part game tutorial adds a practical dimension: because the game surface must be repainted as objects move, it previews the immediate-mode behavior explained in MO3 and the redraw loop behind MO4. Finally, watching a complete project built from start to finish gives you a concrete example to critique against MO5, asking where initialization, state, and rendering responsibilities are kept apart and where they are tangled together.
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.