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.