Chapter 48: Canvas Shadows
Canvas Shadows in the most detailed, slow, step-by-step, human-teacher way possible. 😊
I’m going to explain everything exactly like I’m sitting right next to you in a Hyderabad computer lab or coaching center — no rushing, full classroom style, simple everyday English, lots of copy-paste examples you can run right now, and all the little tips & common mistakes students always make.
1. What are “Canvas Shadows” actually?
Canvas Shadows are the soft, dark, offset copies you can add behind (or around) any shape, text, line, image, or path you draw on the canvas.
It is exactly like the drop-shadow or box-shadow effect you see in CSS or Photoshop — it makes things look lifted off the page, gives depth, makes buttons feel clickable, icons look 3D, text pop out, or cards look modern.
In Canvas, shadows are not drawn automatically — you have to turn them on using four special properties of the 2D context (ctx):
- shadowColor — color of the shadow (usually semi-transparent black)
- shadowBlur — how soft/blurry the shadow is (bigger number = softer/fuzzier)
- shadowOffsetX — how far right/left the shadow is shifted
- shadowOffsetY — how far down/up the shadow is shifted
Golden rule everyone must remember from day one:
Shadows apply to everything you draw after you set these properties — until you turn them off or reset them.
2. Your First Canvas Shadow – Simple Drop Shadow (Copy-Paste & Run)
Create canvas-shadows-hello.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 79 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Shadows – First Example</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } h1 { text-align: center; color: #34495e; } </style> </head> <body> <h1>Canvas Shadows – Let's Add Depth!</h1> <canvas id="shadowCanvas" width="700" height="500"></canvas> <script> const canvas = document.getElementById('shadowCanvas'); const ctx = canvas.getContext('2d'); // Light background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === 1. Simple drop shadow on rectangle === ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // black shadow 50% opacity ctx.shadowBlur = 15; // softness / blur radius ctx.shadowOffsetX = 10; // shift right 10px ctx.shadowOffsetY = 10; // shift down 10px ctx.fillStyle = '#3498db'; // blue fill ctx.fillRect(100, 100, 250, 150); ctx.font = 'bold 30px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.fillText('Shadow Box', 225, 175); // === 2. Turn shadow OFF for next drawings === ctx.shadowColor = 'transparent'; // disables shadow ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; // Normal rectangle – no shadow ctx.fillStyle = '#e74c3c'; ctx.fillRect(400, 100, 250, 150); ctx.fillStyle = 'white'; ctx.fillText('No Shadow', 525, 175); // === 3. Shadow on text only === ctx.shadowColor = 'rgba(0, 0, 0, 0.6)'; ctx.shadowBlur = 12; ctx.shadowOffsetX = 6; ctx.shadowOffsetY = 6; ctx.font = 'bold 70px "Segoe UI"'; ctx.fillStyle = '#2ecc71'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Glowing Text', 350, 350); // Reset shadow again ctx.shadowColor = 'transparent'; </script> </body> </html> |
What you see:
- Blue rectangle with soft black drop shadow (lifted look)
- Red rectangle with no shadow
- Green glowing text with shadow (pop-out effect)
4. All Important Shadow Properties (With Copy-Paste Snippets)
A. shadowColor (color of the shadow)
|
0 1 2 3 4 5 6 7 8 |
ctx.shadowColor = '#000000'; // pure black ctx.shadowColor = 'rgba(0, 0, 0, 0.4)'; // 40% opacity black (most natural) ctx.shadowColor = '#ff6b6b'; // colored shadow (red) |
B. shadowBlur (softness / fuzziness)
|
0 1 2 3 4 5 6 7 8 9 |
ctx.shadowBlur = 0; // no blur (sharp shadow) ctx.shadowBlur = 5; // very soft ctx.shadowBlur = 15; // classic drop shadow (most used) ctx.shadowBlur = 40; // very dreamy / glowy |
C. shadowOffsetX & shadowOffsetY (position shift)
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.shadowOffsetX = 8; // shift right 8px ctx.shadowOffsetY = 8; // shift down 8px ctx.shadowOffsetX = -10; // shift left ctx.shadowOffsetY = -5; // shift up |
D. Shadow on Text + Stroke (very common UI effect)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
ctx.shadowColor = 'rgba(0, 0, 0, 0.6)'; ctx.shadowBlur = 12; ctx.shadowOffsetX = 6; ctx.shadowOffsetY = 6; ctx.font = 'bold 80px Arial'; ctx.fillStyle = '#f1c40f'; ctx.strokeStyle = '#d35400'; ctx.lineWidth = 8; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Shadow + Outline', 350, 200); ctx.strokeText('Shadow + Outline', 350, 200); |
E. Reset / Turn Off Shadow (very important)
|
0 1 2 3 4 5 6 7 8 9 |
ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; |
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Shadows apply to everything you draw after setting them — until you reset
- Always reset shadow after using it → otherwise later shapes get unwanted shadows
- Use rgba(0,0,0,0.3–0.6) for shadowColor — pure black looks fake
- shadowBlur 10–20 = natural drop shadow; 30+ = glow / soft light effect
- Common mistake #1: Forget to reset shadow → all later drawings get shadow
- Common mistake #2: shadowOffsetX/Y too big → shadow looks disconnected
- Pro tip: Combine with globalAlpha or semi-transparent fill for glass / neumorphism look
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.globalAlpha = 0.9; ctx.shadowBlur = 20; ctx.shadowColor = '#00000040'; // draw semi-transparent card ctx.globalAlpha = 1; |
Understood Canvas Shadows fully now? Shadows are one of the most powerful & most-used effects in Canvas — they make UI elements (cards, buttons, icons, text, loaders) look modern, 3D, and professional.
Tell me what you want next — we can build on this:
- Full neumorphism / glassmorphism card with shadow + gradient?
- Animated shadow (hover lift effect)?
- Shadow only on text / circle / image?
- Multiple shadows (hard + soft)?
- Or 15-question Canvas shadows quiz?
Just say — we keep going step by step together! 🚀
