Chapter 36: HTML Canvas
Step 1: What Exactly is HTML Canvas? (Very Simple & Clear Definition)
HTML Canvas is a special HTML element (<canvas>) that gives you a blank rectangular drawing surface inside a web page.
Think of it like:
- A digital blank paper
- A painter’s canvas
- A blackboard in our classroom
But the magic is: you draw on it using JavaScript code.
You can:
- Draw lines, rectangles, circles, curves, text
- Fill colors, gradients, patterns
- Load and manipulate images
- Create animations (move things frame by frame)
- Build games, charts, photo editors, data visualizations, interactive tools…
All of this happens directly in the browser — no plugins, no extra software.
In code it looks like this:
HTML
|
0 1 2 3 4 5 6 |
<canvas id="myCanvas" width="600" height="400"></canvas> |
That single tag is your drawing area. Everything else happens in JavaScript.
Step 2: Why Was Canvas Created? (Quick Historical Context – 2026 View)
- Before 2008–2010: web graphics were limited (images, CSS, Flash)
- HTML5 Canvas (2008–2010) → Apple, Mozilla, Google pushed it as Flash replacement
- 2010s → Canvas became standard → Flash died
- 2026 reality: Canvas is still the foundation of almost all dynamic 2D web graphics (games, editors, charts, animations)
It’s native, fast, GPU-accelerated (via browser), and works on every modern device (phone, tablet, laptop, smart TV).
Step 3: How Does Canvas Actually Work? (The Core Concept)
You always do these three steps:
- Get the canvas element
- Get the 2D drawing context (your “brush/pen”)
- Start drawing using drawing commands
The context object (ctx) is like your drawing toolkit — it has hundreds of methods:
- fillRect(), strokeRect() → rectangles
- arc(), ellipse() → circles & ovals
- beginPath(), moveTo(), lineTo() → freehand lines & curves
- fillStyle, strokeStyle, lineWidth → colors & thickness
- font, fillText() → text
- drawImage() → load & draw images
- clearRect() → erase part or all of canvas
Step 4: Your First Canvas Drawing – Copy-Paste & Run (30 Seconds)
Create a file called canvas-hello.html and paste this:
HTML
|
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Canvas Drawing</title> <style> body { margin: 0; padding: 40px; background: #f0f4f8; font-family: Arial; text-align: center; } h1 { color: #4285f4; } canvas { border: 2px solid #4285f4; border-radius: 10px; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } </style> </head> <body> <h1>HTML Canvas – Your First Drawing</h1> <canvas id="myCanvas" width="600" height="400"></canvas> <script> // 1. Get the canvas const canvas = document.getElementById('myCanvas'); // 2. Get the 2D drawing context (this is your brush) const ctx = canvas.getContext('2d'); // 3. Start drawing! // Background – sky blue ctx.fillStyle = '#87CEEB'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Green grass at bottom ctx.fillStyle = '#228B22'; ctx.fillRect(0, 280, canvas.width, 120); // Yellow sun ctx.beginPath(); ctx.arc(500, 100, 60, 0, Math.PI * 2); ctx.fillStyle = 'yellow'; ctx.fill(); ctx.strokeStyle = 'orange'; ctx.lineWidth = 6; ctx.stroke(); // House ctx.fillStyle = '#8B4513'; ctx.fillRect(200, 200, 200, 150); // main body // Roof ctx.beginPath(); ctx.moveTo(150, 200); ctx.lineTo(300, 120); ctx.lineTo(450, 200); ctx.closePath(); ctx.fillStyle = '#CD5C5C'; ctx.fill(); // Door ctx.fillStyle = '#654321'; ctx.fillRect(280, 250, 40, 100); // Window ctx.fillStyle = '#87CEFA'; ctx.fillRect(220, 230, 60, 60); ctx.strokeStyle = 'black'; ctx.lineWidth = 3; ctx.strokeRect(220, 230, 60, 60); // Text ctx.font = 'bold 40px Arial'; ctx.fillStyle = 'darkblue'; ctx.fillText('Welcome to Canvas!', 120, 80); </script> </body> </html> |
Open this file in your browser — you just drew a simple house scene with pure JavaScript!
Step 5: Animation – The Real Power of Canvas
Static drawings are nice — but animation is where Canvas shines.
Bouncing smiley ball example:
HTML
|
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 49 50 51 52 53 54 55 56 57 58 |
<canvas id="canvas" width="600" height="400" style="border:1px solid #ccc;"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let x = 300; let y = 200; let dx = 4; let dy = 3; const radius = 40; function drawSmiley() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Face ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = 'yellow'; ctx.fill(); ctx.strokeStyle = 'black'; ctx.lineWidth = 4; ctx.stroke(); // Eyes ctx.beginPath(); ctx.arc(x - 15, y - 10, 8, 0, Math.PI * 2); ctx.arc(x + 15, y - 10, 8, 0, Math.PI * 2); ctx.fillStyle = 'black'; ctx.fill(); // Smile ctx.beginPath(); ctx.arc(x, y + 10, 20, 0, Math.PI); ctx.strokeStyle = 'black'; ctx.lineWidth = 6; ctx.stroke(); } function update() { if (x + radius > canvas.width || x - radius < 0) dx = -dx; if (y + radius > canvas.height || y - radius < 0) dy = -dy; x += dx; y += dy; drawSmiley(); requestAnimationFrame(update); // ~60 fps } update(); </script> |
This is real-time animation — the smiley ball bounces around forever.
Step 6: Quick Summary Table (Keep This Handy!)
| Feature | What it lets you do | Common Commands / Properties | Example Use in 2026 |
|---|---|---|---|
| Basic Shapes | Rectangles, circles, lines, curves | fillRect, arc, lineTo, bezierCurveTo | Icons, buttons, game objects |
| Colors & Styles | Solid colors, gradients, patterns | fillStyle, strokeStyle, createLinearGradient | Beautiful backgrounds, charts |
| Text | Draw any font & size | font, fillText, strokeText | Game scores, labels, watermarks |
| Images | Load & draw photos, manipulate pixels | drawImage, getImageData, putImageData | Photo editors, filters, memes |
| Animation | Smooth movement, 60 fps | requestAnimationFrame, clearRect | Games, loading spinners, live charts |
| Transformations | Rotate, scale, translate, skew | rotate, scale, translate, save/restore | 3D-like effects in 2D, spinning objects |
Final Teacher Words
HTML Canvas = a blank rectangular drawing area in HTML that you control completely with JavaScript.
- It’s the foundation of almost all dynamic 2D web graphics in 2026
- Start simple: draw a smiley face or bouncing ball today
- Then add animation → games, charts, drawing tools
- When you want 3D → move to WebGL + Three.js
- When you want vector/scalable → use SVG
In 2026 Canvas is still everywhere:
- Figma / Canva / Excalidraw → heavy Canvas
- Chart.js / D3 → Canvas or SVG backend
- Browser games → Canvas + WebGL
- Photo editors → Canvas pixel manipulation
Got the big picture now? 🔥
Questions?
- Want a step-by-step drawing app like MS Paint in browser?
- Full particle explosion animation?
- First rotating 3D cube with Three.js?
- How to make a live clock or analog gauge?
Just tell me — next class is ready! 🚀
