Hello, Canvas

Here's What You'll Build

A digital sketch pad where you click to place colorful circles on screen. You can toggle rainbow mode and adjust the brush size.

The Concept

What is a canvas? Coordinates, pixels, drawing shapes.

The Math Behind It

Coordinate systems (x, y), origin point, screen dimensions.

Building with Claude

In this lesson, you will direct Claude to build this game step by step. Each step includes the exact prompt to type into Claude Code, followed by an explanation of why the prompt works.

Step 1: Set Up the HTMLHyperText Markup Language

Type this prompt into Claude Code:

Create a single HTML file called sketch-pad.html. It should have a dark
background color (#0d0a1a) and a centered canvas element that is 800 pixels
wide and 600 pixels tall. Add a title "Sketch Pad" above the canvas in white
text. Style it so the page looks clean with no default margins.

Claude will generate a complete HTML file with a styled canvas ready for drawing.

Why this prompt works: We told Claude exactly what to create (a single HTML file), gave it specific values (800x600, #0d0a1a), and described the visual result we want (centered, clean, no default margins). The more specific you are, the closer Claude gets to what you imagine on the first try.

Open the file in your browser to see the result:

open sketch-pad.html

You should see a dark page with a titled canvas element in the center. Nothing draws yet -- that comes next.

Step 2: Add Drawing Logic

Now type this prompt:

Add drawing functionality to the canvas in sketch-pad.html. When I click or
drag the mouse on the canvas, draw a filled circle at the mouse position. The
circle should be neon green (#39ff14) and 10 pixels in radius. Also add a
"Clear" button below the canvas that erases everything and resets to the dark
background.

Claude will update the file with mouse event handling and drawing code.

Why this prompt works: We described the interaction ("click or drag"), gave exact visual values (neon green, 10px radius), and described a specific UIUser Interface element (Clear button) with its behavior (erases everything). Notice we described what should happen from the user's perspective, not how to code it.

Refresh your browser and try clicking and dragging on the canvas. You should see neon green circles appearing wherever your mouse goes.

Step 3: Polish and Refine

Type this prompt:

Improve sketch-pad.html with these features: 1) A range slider that controls
brush size from 4 to 60 pixels, labeled "Brush Size". 2) A rainbow mode
toggle button -- when rainbow mode is on, each circle uses a different color
that cycles smoothly through the color spectrum. When off, use neon green.
3) Make drawing smooth when dragging so there are no gaps between circles even
when moving fast. 4) Add touch support so it works on phones and tablets.

Claude will add all four features to the existing file.

Why this prompt works: We used a numbered list to clearly separate multiple features. Each feature includes specific behavior ("cycles smoothly through the color spectrum"), edge cases ("no gaps between circles even when moving fast"), and practical considerations ("works on phones and tablets"). When asking for multiple changes at once, numbered lists help Claude keep track of everything.

Refresh your browser. You now have a fully interactive sketch pad with adjustable brush size, rainbow mode, and smooth drawing.

Understanding What Claude Built

Let's look at what Claude generated and understand the key concepts:

The Canvas APIApplication Programming Interface: HTML5HyperText Markup Language version 5 provides a <canvas> element -- a rectangular area where JavaScript can draw shapes, lines, and images pixel by pixel. Claude used getContext('2d') to access the 2DTwo-Dimensional drawing tools.

Coordinate System: The canvas has an (x, y) coordinate system where (0, 0) is the top-left corner. X increases to the right, Y increases downward. When you click at a position, the browser reports those coordinates, and Claude's code draws a circle there.

Event Listeners: The code listens for mouse events (mousedown, mousemove, mouseup) to know when and where you are drawing. Touch events (touchstart, touchmove, touchend) do the same for mobile devices.

The Drawing Loop: When you drag the mouse, the code draws circles at each reported position. To fill gaps during fast movement, it interpolates between the previous position and the current one, drawing circles along the line between them.

HSLHue, Saturation, Lightness Color Cycling: Rainbow mode uses HSL (Hue, Saturation, Lightness) color values. By incrementing the hue value from 0 to 360, the color smoothly cycles through red, orange, yellow, green, cyan, blue, purple, and back to red.

AIArtificial Intelligence Skill: Prompting for Complete Files

This lesson demonstrated the core AI skill you will use throughout this course: how to prompt Claude to generate a complete, working HTML file.

This is a fundamental skill you will use in every lesson going forward.