A reading that explains what the HTML5 Canvas element is, its history and advantages over older plugin-based approaches, and how to add it to a webpage and obtain a 2D rendering context in JavaScript, serving as the foundational lesson before any drawing begins.
Topics
This module covers 7 topics. Open a topic to see its subtopics.
Module Content
13 items.
-
-
A reading that covers how to prepare the canvas context and draw basic shapes such as rectangles and other primitives using the Canvas 2D API, teaching learners the essential first steps for rendering graphics programmatically.
-
A reading that explains the Canvas path system — including beginPath(), moveTo(), lineTo(), stroke(), arc(), and curves — showing learners how to define and render complex shapes and line-based drawings step by step.
-
A reading that covers how to apply fill and stroke colors, transparency, linear and radial gradients, and blending options in the Canvas 2D API, teaching learners how to control the visual appearance of all drawn elements.
-
A reading that explains how to render and style text directly on an HTML5 Canvas using the Canvas 2D API, covering font properties, fillText(), strokeText(), and text measurement, and distinguishing canvas text from DOM-based text.
-
A reading that covers how to draw, scale, crop, and manipulate raster images on the HTML5 Canvas using drawImage() and related API features, providing the skills needed for use cases such as photo editors, sprite-based games, and image overlays.
-
A reading that explains how to combine the Canvas drawing surface with the browser's event system to create interactive graphics, covering event listeners, coordinate mapping, and real-time user input handling on the canvas.
-
A duplicate reading of the Foundations of Interactive Canvas Graphics lesson covering how to wire browser events to canvas drawing for real-time interactive graphics, which learners and instructors can use identically to artifact 8.
-
A reading that introduces the canvas element as a JavaScript-controlled bitmap drawing surface, explaining how it differs from DOM elements like divs and images, how to obtain a 2D rendering context, and how canvas width/height and the coordinate system work — used as the conceptual starting point before any drawing code is written.
-
A tutorial covering the core 2D context drawing commands for rectangles, paths, lines, arcs, and text, including selecting the canvas from the DOM, requesting the context, and applying fill and stroke styles — learners follow the examples to produce their first shapes on a canvas.
-
A lesson on loading and painting raster images onto the canvas with drawImage, including its coordinate, scaling, and cropping argument forms and the implications of immediate-mode rendering once pixels are baked into the bitmap — used to practice compositing photos and sprites into canvas scenes.
-
A reading that explains how interactivity and animation are built on an immediate-mode surface, covering clearing and redrawing frames, tracking shape state in JavaScript objects, mapping mouse coordinates to canvas positions, and hit detection — used to move from static drawings to responsive, animated graphics.
-
The consolidated module overview page that stitches together all four canvas topics — the canvas element, basic shapes, images, and interactive graphics — into a single continuous reading for review or printing.