Chapter 33: Canvas Intro
Canvas today from the very beginning, as if you’ve never touched it before.
I’m going to teach this the way a good private tutor would: slowly, clearly, with small complete examples, mental models you can actually remember, and zero magic hand-waving.
We will build understanding step by step — not just throw 300 lines of code at you.
HTML5 Canvas – Complete Beginner Introduction (2025–2026 edition – modern best practices)
0. What is Canvas – the most honest explanation
<canvas> is an HTML element that gives you a blank rectangular bitmap (pixel grid) you can draw on using JavaScript.
Main differences from SVG (very important to understand on day one):
| Question | Canvas answer | SVG answer |
|---|---|---|
| Is it vector or bitmap? | Bitmap (pixels) | Vector (math shapes) |
| Does it stay sharp when zoomed? | No – enlarges → pixelates | Yes – always perfect |
| How many objects exist in memory? | Basically one image | One DOM element per shape |
| Can I click individual shapes? | Only if you keep track of coordinates manually | Yes – real DOM elements |
| Best for | Games, particles, charts with thousands of points, real-time drawing, video effects, 3D projections | Icons, logos, diagrams, maps, interactive infographics |
| Animation style | You redraw everything every frame | Change attributes → browser redraws only changed parts |
| File size for complex graphics | Usually smaller (one bitmap) | Can become very large (many elements) |
Rule of thumb in 2026 → Use Canvas when you need high performance with thousands of moving/changing things → Use SVG when you need sharp vectors + easy interactivity + DOM access
1. Absolute minimal working Canvas (copy → paste → open in browser)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas – First Drawing</title> <style> canvas { border: 1px solid #ccc; background: #f8f9fa; display: block; margin: 40px auto; } </style> </head> <body> <canvas id="myCanvas" width="640" height="360"></canvas> <script> // 1. Get the <canvas> DOM element const canvas = document.getElementById('myCanvas'); // 2. Get the 2D drawing context (your "paintbrush") const ctx = canvas.getContext('2d'); // 3. Set colors / styles (they stay until you change them again) ctx.fillStyle = '#4CAF50'; // green fill ctx.strokeStyle = '#2E7D32'; // darker green stroke ctx.lineWidth = 8; // 4. Draw! ctx.fillRect(80, 80, 200, 120); // filled rectangle ctx.strokeRect(340, 80, 200, 120); // outlined rectangle // Text ctx.font = 'bold 48px Arial'; ctx.fillStyle = '#2196F3'; ctx.textAlign = 'center'; ctx.fillText('Hello Canvas!', 320, 280); </script> </body> </html> |
What just happened – step-by-step thinking
- <canvas id=”myCanvas” width=”640″ height=”360″> → creates a 640×360 pixel bitmap surface
- getContext(‘2d’) → gives you the drawing API object (the only context almost everyone uses)
- All drawing commands go through ctx: fillRect, strokeRect, fillText, arc, lineTo, etc.
- State is sticky — fillStyle stays green until you change it
2. The most important mental model: Canvas is a stateful painter
Canvas does not remember shapes like SVG does.
It is more like:
- a painter standing in front of a canvas
- you tell him “use green fill”, “use 8px thick pen”, “draw a rectangle here”
- he paints it immediately
- next command uses the current brush settings until you change them
That’s why we often do this:
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.save(); // remember current state (color, line width, transform...) ctx.fillStyle = 'orange'; ctx.globalAlpha = 0.6; ctx.fillRect(…); ctx.restore(); // go back to previous state |
Very important methods to remember forever
| Method | Purpose | Almost always pair with… |
|---|---|---|
| save() | Push current state to stack | restore() |
| restore() | Pop state back | — |
| beginPath() | Start a new path (forget previous subpath) | almost always before new shape |
| stroke() | Draw the current path outline | after defining path |
| fill() | Fill current path | after defining path |
3. Drawing paths – the heart of Canvas
Almost everything interesting is a path.
Basic pattern you will write 1000 times:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
ctx.beginPath(); // ← forget this → paths connect unexpectedly ctx.moveTo(100, 100); // pen up + jump to start point ctx.lineTo(300, 50); ctx.lineTo(400, 180); ctx.closePath(); // optional – connects back to start ctx.strokeStyle = '#673AB7'; ctx.lineWidth = 12; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.stroke(); // ← actually draw the outline // or fill it ctx.fillStyle = 'rgba(103,58,183,0.3)'; ctx.fill(); |
4. Quick circle / arc example
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
ctx.beginPath(); ctx.arc( 320, 180, // center x,y 80, // radius 0, // start angle (0 = right = 3 o'clock) Math.PI * 1.8, // end angle (Math.PI*2 = full circle) false // counterclockwise? (almost always false) ); ctx.fillStyle = '#FF9800'; ctx.fill(); ctx.strokeStyle = '#EF6C00'; ctx.lineWidth = 14; ctx.stroke(); |
Quick angle reference (in radians)
- 0 = right (3 o’clock)
- Math.PI/2 = down (6 o’clock)
- Math.PI = left (9 o’clock)
- Math.PI*2 = full circle
Your first 3 tiny tasks (do them tonight – 10–15 min each)
Task 1 – Smiley face Yellow circle face + two black eyes + red smiling arc mouth
Task 2 – Bouncing ball skeleton Copy the animation loop pattern from earlier lessons Make a blue ball bounce left/right + top/bottom
Task 3 – Color trail Modify bouncing ball so it leaves a fading trail (hint: instead of clearRect full canvas → fill with semi-transparent black rectangle)
Paste any of them here when you’re done — I’ll give detailed feedback like we’re pair-programming together.
Which part feels most confusing or unfamiliar right now?
- The stateful painter concept?
- Paths vs simple shapes?
- Why we need beginPath()?
- Animation loop structure?
- How Canvas differs from SVG?
- Something else?
Tell me honestly — we’ll slow down and fix exactly the piece that’s fuzzy for you. Canvas is tricky at first, but once it clicks it’s incredibly rewarding.
You’re doing great — let’s keep going! 🚀
