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.