The HTML5 canvas element gives you a blank rectangular drawing surface on a webpage that you control entirely from JavaScript. Unlike HTML elements such as divs or images, the canvas itself holds no content you can style or inspect in the DOM — it is a bitmap you paint onto by calling drawing commands. That single idea shapes everything else in this module: if you want a shape on screen, your code has to draw it, and if you want it to change, your code has to draw it again.
In this topic you will see the full startup sequence: placing a canvas tag in your markup with width and height attributes, giving it an id, selecting it in JavaScript with something like document.getElementById, and calling getContext("2d") to obtain the rendering context object that exposes the drawing API. You will also meet the canvas coordinate system, where the origin sits at the top-left corner and the y-axis increases downward — a detail that trips up many beginners and that matters later when you map mouse positions into canvas space.
As you watch, pay attention to a few specifics: why the width and height should be set as HTML attributes rather than only in CSS, what exactly getContext returns and why the context (not the canvas) owns the drawing methods, and how the presenter checks that the setup worked before drawing anything complex. Try typing the setup code yourself alongside the video rather than only watching it.
The opening episode of a Web Graphics Programming series, this video introduces the Canvas 2D API and the foundations of the HTML canvas element. Expect an overview of what canvas is for, how to place it on a page, and how to reach the 2D rendering context before any drawing takes place. As a series opener it is likely to frame canvas within the wider landscape of web graphics.
It is positioned as a first-principles introduction, which matches the opening subtopics on what canvas is and how the rendering context works, and the series format means the setup steps are explained rather than assumed.
A beginner-oriented HTML5 tutorial that walks through creating a simple canvas using the canvas element. The longer runtime allows time for the markup, the sizing attributes, and a first look at drawing through JavaScript. It is pitched at students who have not used canvas before.
Its slower, beginner pace supports the subtopics on adding the canvas element to a page and writing the basic setup code, giving you a second pass over the same steps at a different level of detail.
This tutorial focuses on using the canvas element to draw graphics in the browser with JavaScript, starting from how to set up the canvas. It moves from the setup phase into actually putting marks on the surface, so you see the payoff of the initialization code. The short runtime keeps it focused on the essentials.
It connects setup to a first drawing, which helps you confirm that selecting the element and retrieving the context actually works, and it reinforces the coordinate system through practical placement of shapes.
All three videos target MO1 directly: each one demonstrates embedding the canvas element in a page, selecting it from JavaScript, and retrieving the 2D rendering context — the exact sequence you must be able to reproduce from memory. The drawing portions of the DevWebApp and Rai Gurukul tutorials give an early preview of the Canvas API methods you will apply more fully under MO2, and the emphasis across all three on the context object as the holder of drawing commands lays the conceptual groundwork for MO3's distinction between immediate-mode and retained-mode rendering. Understanding the top-left origin and the canvas coordinate system here is also a prerequisite for translating mouse event coordinates in MO4.
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.
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.
So far in this module you have drawn shapes, paths, and text using the Canvas 2D context. This topic adds raster images to that toolkit. The key method is drawImage, which takes an image source and paints its pixels onto the canvas at coordinates you choose. Because the canvas is immediate-mode, an image you draw becomes part of the canvas bitmap: it cannot be moved or restyled later, only cleared and redrawn.
The first practical hurdle is loading. An image file is fetched asynchronously, so calling drawImage before the file has finished downloading silently draws nothing. The standard pattern is to create an Image object, assign a handler to its onload (or a 'load' event listener), set the src, and do the drawing inside that handler. From there, drawImage has three forms: three arguments to place an image at a point, five arguments to place and scale it into a destination rectangle, and nine arguments to crop a source rectangle out of the image and then scale that crop into a destination rectangle — the basis of sprite sheets and image tiling.
As you watch, pay attention to where the drawing call sits relative to the load handler, how the argument list changes as scaling and cropping are added, and how the source rectangle is measured in the image's own pixel dimensions rather than canvas coordinates. Also note practical issues such as image aspect ratio, canvas size versus CSS size, and the fact that images loaded from other domains can taint the canvas.
A short, focused walkthrough of the Canvas API in which images are drawn onto a canvas element with JavaScript. Based on its title and description, it covers accessing the canvas element introduced in HTML5, obtaining a drawing context, and using the API to render and create image content in the browser. Expect to see the image object being prepared in code before it is painted to the canvas.
At about four minutes it is a compact demonstration that connects the canvas setup steps you already know to the image-drawing workflow at the center of this topic, giving you a working code pattern to imitate before you experiment with the scaling and cropping argument forms of drawImage.
The video reinforces MO1 by showing the canvas element being selected in JavaScript and a rendering context retrieved before any drawing occurs, and it directly supports MO2 by demonstrating drawImage as one of the Canvas API methods used to produce canvas output alongside shapes and text. Because images must be loaded and then explicitly painted into the bitmap, the demonstration also illustrates the immediate-mode behavior described in MO3, and the load-then-draw structure it models is a small example of the separation between initialization and rendering that MO5 asks you to evaluate in your own code.
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.
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.