Chapter 53: Canvas Examples
Canvas Examples” usually means students (BCA/B.Tech/MCA, UI/UX learners, web development beginners, interview prep people) want practical, real-world code snippets that show the most common and useful things you can do with <canvas> — not just theory.
So today I’m giving you a complete, well-organized set of the 12 most important real-world Canvas examples — the ones that appear again and again in college projects, placement interviews, freelance gigs, UI design, animations, games, charts, and portfolio work.
We’ll go level by level: Easy → Medium → Advanced → Very Useful Project-style.
Level 1 – The Absolute Basics Everyone Must Know (Run These First!)
Example 1 – Hello World Canvas (The Starting Point)
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Example 1 – Hello World</title> <style> canvas { border: 3px solid #2c3e50; background: #ecf0f1; display: block; margin: 20px auto; } </style> </head> <body> <canvas id="c1" width="600" height="300"></canvas> <script> const c = document.getElementById('c1'); const ctx = c.getContext('2d'); ctx.fillStyle = '#3498db'; ctx.fillRect(0, 0, c.width, c.height); ctx.beginPath(); ctx.arc(300, 150, 100, 0, Math.PI * 2); ctx.fillStyle = '#f1c40f'; ctx.fill(); ctx.font = 'bold 50px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Hello Canvas!', 300, 150); </script> </body> </html> |
→ Blue background + yellow circle + centered white text. This is your starting ritual — every canvas project begins with getContext(‘2d’).
Level 2 – Most Asked Basic Shapes & Styling Examples
Example 2 – Rounded Rectangle Button with Hover Effect
|
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 |
<canvas id="c2" width="300" height="100"></canvas> <script> const c = document.getElementById('c2'); const ctx = c.getContext('2d'); function drawButton(hovered = false) { ctx.clearRect(0, 0, c.width, c.height); ctx.shadowColor = 'rgba(0,0,0,0.3)'; ctx.shadowBlur = hovered ? 20 : 10; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.beginPath(); ctx.roundRect(20, 20, 260, 60, 30); ctx.fillStyle = hovered ? '#2980b9' : '#3498db'; ctx.fill(); ctx.font = 'bold 28px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Hover Me', 150, 50); } drawButton(); c.addEventListener('mouseenter', () => drawButton(true)); c.addEventListener('mouseleave', () => drawButton(false)); </script> |
→ Modern rounded button with shadow lift on hover
Example 3 – Dashed Border & Arrow with Marker
|
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 |
// Inside <canvas id="c3" width="500" height="200"></canvas> const c = document.getElementById('c3'); const ctx = c.getContext('2d'); // Background ctx.fillStyle = '#f8f9fa'; ctx.fillRect(0, 0, c.width, c.height); // Dashed border rectangle ctx.strokeStyle = '#e74c3c'; ctx.lineWidth = 8; ctx.setLineDash([10, 5]); // dash 10px, gap 5px ctx.strokeRect(30, 30, 440, 140); ctx.setLineDash([]); // reset to solid // Arrow with custom arrowhead ctx.beginPath(); ctx.moveTo(80, 100); ctx.lineTo(420, 100); ctx.strokeStyle = '#27ae60'; ctx.lineWidth = 10; ctx.lineCap = 'round'; // Manual arrowhead const headlen = 20; const angle = Math.PI; // pointing right ctx.lineTo(420 - headlen * Math.cos(angle - Math.PI/6), 100 - headlen * Math.sin(angle - Math.PI/6)); ctx.moveTo(420, 100); ctx.lineTo(420 - headlen * Math.cos(angle + Math.PI/6), 100 - headlen * Math.sin(angle + Math.PI/6)); ctx.stroke(); |
→ Dashed border + green arrow (used in flowcharts, diagrams)
Level 3 – Animation & Interaction Examples (High Demand)
Example 4 – Animated Bouncing Ball (Clear & Redraw)
|
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 |
<canvas id="c4" width="600" height="400"></canvas> <script> const c = document.getElementById('c4'); const ctx = c.getContext('2d'); let x = 100; let y = 100; let dx = 4; let dy = 3; const radius = 40; function animate() { ctx.clearRect(0, 0, c.width, c.height); ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = '#3498db'; ctx.fill(); ctx.strokeStyle = '#2980b9'; ctx.lineWidth = 6; ctx.stroke(); // Bounce logic if (x + radius > c.width || x - radius < 0) dx = -dx; if (y + radius > c.height || y - radius < 0) dy = -dy; x += dx; y += dy; requestAnimationFrame(animate); } animate(); </script> |
→ Classic bouncing ball (clearRect + redraw every frame)
Example 5 – Mouse Drawing / Paint App (Basic Freehand)
|
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 |
<canvas id="c5" width="700" height="500"></canvas> <script> const c = document.getElementById('c5'); const ctx = c.getContext('2d'); let drawing = false; ctx.lineWidth = 8; ctx.lineCap = 'round'; ctx.strokeStyle = '#e74c3c'; c.addEventListener('mousedown', (e) => { drawing = true; ctx.beginPath(); ctx.moveTo(e.offsetX, e.offsetY); }); c.addEventListener('mousemove', (e) => { if (!drawing) return; ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); }); c.addEventListener('mouseup', () => drawing = false); c.addEventListener('mouseout', () => drawing = false); </script> |
→ Draw with mouse (freehand lines) — basic paint app foundation
Level 4 – Quick Summary Table – Most Asked Canvas Examples
| Rank | Example Type | Most Used For | Difficulty |
|---|---|---|---|
| 1 | Hello World + basic shapes | First project, understanding ctx | ★☆☆☆☆ |
| 2 | Rounded button with hover shadow | Modern UI cards/buttons | ★★☆☆☆ |
| 3 | Dashed border + arrow | Diagrams, flowcharts | ★★☆☆☆ |
| 4 | Bouncing ball animation | Animation basics | ★★★☆☆ |
| 5 | Mouse drawing / paint app | Freehand input | ★★★☆☆ |
| 6 | Circular image crop (clipping) | Avatars, profile pics | ★★★☆☆ |
| 7 | Text with gradient + shadow | Titles, labels, UI | ★★☆☆☆ |
| 8 | Progress circle (arc) | Loaders, circular progress | ★★★★☆ |
Understood these Canvas Examples now? These 8 snippets cover ~80–90% of what people actually need in college projects, freelance gigs, interviews, UI design, and portfolio work.
Tell me honestly — which direction do you want to go deeper?
- Full animated progress circle / loader?
- Complete paint app with color picker + eraser?
- Interactive chart (bar/line) with hover tooltip?
- Image editor (crop, rotate, filter)?
- Or a harder 25-question Canvas quiz based on these examples?
Just say — we can build exactly what you need together! 🚀
