Chapter 45: Canvas Text
1. What is “Canvas Text” actually?
Canvas Text means using JavaScript on the <canvas> element to draw text (words, sentences, titles, labels, numbers, signatures, game scores, chart labels, buttons text, etc.) directly on the canvas.
In Canvas, text is not HTML text (no <p>, <h1>, no CSS hover effects on individual letters). Instead, text is drawn like paint — once you place it, it becomes pixels. You control:
- What text to write
- Where to place it
- Font family, size, weight, style
- Color (fill & stroke)
- Alignment (left, center, right)
- Baseline (top, middle, bottom of letters)
- Shadows, rotation, gradients, patterns on text
Very important from day one:
- Canvas text is pixel-based — zoom too much = can look pixelated (unlike SVG text)
- You draw text with fillText() or strokeText() (or both)
- Text uses the currentfont, fillStyle, strokeStyle, textAlign, textBaseline
2. Your First Canvas Text – Hello World Style (Copy-Paste & Run)
Create canvas-text-hello.html:
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Text – First Example</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } </style> </head> <body> <h1>Canvas Text – Let's Write Words!</h1> <canvas id="textCanvas" width="700" height="400"></canvas> <script> const canvas = document.getElementById('textCanvas'); const ctx = canvas.getContext('2d'); // Light background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // === 1. Simple filled text === ctx.font = 'bold 80px Arial'; ctx.fillStyle = '#e74c3c'; // red ctx.textAlign = 'center'; // horizontal alignment ctx.textBaseline = 'middle'; // vertical alignment ctx.fillText('Hello Canvas!', 350, 150); // === 2. Stroke text (outline only) === ctx.font = 'bold 60px "Segoe UI"'; ctx.strokeStyle = '#2ecc71'; // green border ctx.lineWidth = 6; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeText('Stroke Text', 350, 250); // === 3. Fill + Stroke text === ctx.font = 'bold 70px Georgia'; ctx.fillStyle = '#f1c40f'; // yellow fill ctx.strokeStyle = '#d35400'; // orange outline ctx.lineWidth = 8; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Fill + Stroke', 350, 350); ctx.strokeText('Fill + Stroke', 350, 350); // Label the alignments ctx.font = '20px Arial'; ctx.fillStyle = '#2c3e50'; ctx.fillText('textAlign: center + textBaseline: middle', 350, 380); </script> </body> </html> |
What you see:
- Big red filled text “Hello Canvas!”
- Green outlined text “Stroke Text”
- Yellow filled + orange outlined text “Fill + Stroke”
- Small explanation text below
3. All Important Text Properties & Methods (With Copy-Paste Snippets)
A. font (size + family + style + weight)
JavaScript
|
0 1 2 3 4 5 6 7 |
ctx.font = 'bold italic 48px "Segoe UI", Arial, sans-serif'; // order: style weight size family |
B. fillStyle & strokeStyle (color)
JavaScript
|
0 1 2 3 4 5 6 7 8 |
ctx.fillStyle = '#27ae60'; // green fill ctx.strokeStyle = '#219653'; // darker green outline ctx.lineWidth = 5; |
C. textAlign (horizontal alignment)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.textAlign = 'start'; // left (default) ctx.textAlign = 'end'; // right ctx.textAlign = 'center'; // middle ctx.textAlign = 'left'; ctx.textAlign = 'right'; |
D. textBaseline (vertical alignment – very confusing for beginners)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 |
ctx.textBaseline = 'top'; // text top = y coordinate ctx.textBaseline = 'hanging'; // like top but for some scripts ctx.textBaseline = 'middle'; // center of text = y coordinate (most useful) ctx.textBaseline = 'alphabetic'; // default – bottom of normal letters ctx.textBaseline = 'ideographic'; // for Asian scripts ctx.textBaseline = 'bottom'; // bottom of text = y coordinate |
E. Shadows on Text (very common in UI)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; ctx.shadowBlur = 10; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.font = 'bold 60px Arial'; ctx.fillStyle = '#3498db'; ctx.fillText('Shadow Text', 350, 200); ctx.shadowColor = 'transparent'; // reset shadow |
F. Text on Path / Curve (advanced – not native, but possible with libraries or manual math)
Canvas does not have <textPath> like SVG. You either:
- Use a library (like opentype.js + manual placement)
- Or draw letter-by-letter with rotation
Simple manual example (not perfect, just idea):
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
const text = "Curved Text"; const centerX = 350; const centerY = 250; const radius = 120; for (let i = 0; i < text.length; i++) { const angle = (Math.PI * 2 / text.length) * i - Math.PI / 2; const x = centerX + radius * Math.cos(angle); const y = centerY + radius * Math.sin(angle); ctx.save(); ctx.translate(x, y); ctx.rotate(angle + Math.PI / 2); ctx.font = '30px Arial'; ctx.fillStyle = '#e74c3c'; ctx.fillText(text[i], 0, 0); ctx.restore(); } |
4. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- textAlign & textBaseline together control where the text sits relative to (x,y)
- Most useful combo: textAlign = ‘center’ + textBaseline = ‘middle’
- Common mistake #1: Forget to set font → default tiny 10px font appears
- Common mistake #2: Wrong textBaseline → text looks shifted up/down
- Common mistake #3: Draw text but forget fillText() or strokeText() → invisible!
- Pro tip: Use ctx.measureText(text) to get width → center text perfectly
JavaScript
|
0 1 2 3 4 5 6 7 8 |
const metrics = ctx.measureText('Hello'); const textWidth = metrics.width; ctx.fillText('Hello', (canvas.width - textWidth)/2, 200); |
Understood Canvas Text fully now? Text is one of the most used features in Canvas — charts labels, game scores, UI buttons, loaders percentage, watermarks, everything.
Tell me what you want next — we can build on this:
- Animated typing text effect?
- Text with gradient fill + shadow?
- Text inside circle / curved text demo?
- Canvas dashboard with labels & numbers?
- Or 15-question Canvas text quiz?
Just say — we keep going step by step together! 🚀
