Chapter 47: Canvas Text Alignment
Canvas Text Color and Canvas Text Alignment 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. Two Main Topics Today
- Canvas Text Color ā how to control the fill color (inside of letters) and stroke color (outline/border of letters)
- Canvas Text Alignment ā how to control where the text sits relative to the (x, y) position you give it
Both are controlled through properties of the 2D context (ctx).
2. Canvas Text Color ā Full Details
In Canvas, text color is not set with CSS color property. Instead you use two special properties:
- fillStyle ā color of the inside of the letters (most common)
- strokeStyle ā color of the outline/border around the letters (optional, very useful for emphasis)
You also control thickness of the outline with lineWidth.
Basic rules everyone must remember:
- fillText() uses fillStyle
- strokeText() uses strokeStyle
- You can use both at the same time on the same text (fill first, then stroke on top)
- Colors work the same way as fill/stroke on shapes: named colors, hex, rgb/rgba, hsl, gradients, patterns
3. Your First Text Color & Alignment Example (Copy-Paste & Run)
Create canvas-text-color-alignment.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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Text Color & Alignment</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } .container { max-width: 900px; margin: auto; padding: 20px; } </style> </head> <body> <div class="container"> <h1>Canvas Text ā Color & Alignment Explained</h1> <canvas id="textCanvas" width="800" height="500"></canvas> </div> <script> const canvas = document.getElementById('textCanvas'); const ctx = canvas.getContext('2d'); // Background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Draw vertical center line (helps see alignment) ctx.strokeStyle = '#bdc3c7'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(canvas.width / 2, 0); ctx.lineTo(canvas.width / 2, canvas.height); ctx.stroke(); // === 1. Basic filled text ā red color === ctx.font = 'bold 60px Arial'; ctx.fillStyle = '#e74c3c'; // red fill color ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Red Filled Text', canvas.width/2, 100); // === 2. Stroke text only ā blue outline === ctx.font = 'bold 60px Arial'; ctx.strokeStyle = '#3498db'; // blue outline color ctx.lineWidth = 8; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeText('Blue Outlined Text', canvas.width/2, 180); // === 3. Fill + Stroke on same text === ctx.font = 'bold 70px "Segoe UI"'; ctx.fillStyle = '#f1c40f'; // yellow fill ctx.strokeStyle = '#d35400'; // dark orange outline ctx.lineWidth = 10; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Yellow + Orange Outline', canvas.width/2, 280); ctx.strokeText('Yellow + Orange Outline', canvas.width/2, 280); // === 4. Gradient fill on text === const grad = ctx.createLinearGradient(0, 300, canvas.width, 300); grad.addColorStop(0, '#ff6b6b'); grad.addColorStop(0.5, '#feca57'); grad.addColorStop(1, '#1e90ff'); ctx.font = 'bold 60px Arial'; ctx.fillStyle = grad; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Rainbow Gradient Text', canvas.width/2, 380); // Labels explaining alignment ctx.font = '18px Arial'; ctx.fillStyle = '#2c3e50'; ctx.textAlign = 'center'; ctx.fillText('textAlign = "center" + textBaseline = "middle"', canvas.width/2, 450); ctx.fillText('All text is centered around this vertical line', canvas.width/2, 480); </script> </body> </html> |
What you see:
- Red filled text
- Blue outlined text
- Yellow filled + orange outlined text
- Rainbow gradient filled text
- Vertical center line + explanation (shows where the text is anchored)
4. All Important Text Color & Alignment Properties
A. Text Color ā fillStyle & strokeStyle
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Solid colors ctx.fillStyle = '#27ae60'; // green fill ctx.strokeStyle = '#219653'; // darker green outline // With transparency ctx.fillStyle = 'rgba(52, 152, 219, 0.7)'; // blue 70% opacity // Gradient fill on text const grad = ctx.createLinearGradient(0, 0, canvas.width, 0); grad.addColorStop(0, 'yellow'); grad.addColorStop(1, 'red'); ctx.fillStyle = grad; |
B. textAlign ā Horizontal Alignment
| Value | Meaning | Where text sits relative to x coordinate |
|---|---|---|
| start | Left side (default in LTR languages) | x = left edge of text |
| end | Right side | x = right edge of text |
| center | Center (most useful) | x = middle of text |
| left | Same as start | x = left edge |
| right | Same as end | x = right edge |
C. textBaseline ā Vertical Alignment (Very Confusing for Beginners)
| Value | Meaning (where y coordinate points) | Best use case |
|---|---|---|
| top | Top edge of text | When you want y = top |
| hanging | Special for some scripts | Rarely used |
| middle | Middle of text (most useful) | Center text vertically |
| alphabetic | Default ā bottom of normal letters | Standard writing |
| ideographic | For Asian scripts | Rarely used |
| bottom | Bottom of entire text (including descenders) | When you want y = bottom |
Most useful combo students should memorize:
JavaScript
|
0 1 2 3 4 5 6 7 8 9 |
ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; // Now (x,y) is the exact center of the text box ctx.fillText('Centered Perfectly', canvas.width/2, canvas.height/2); |
5. Teacherās Quick Tips (Hyderabad Student Style š)
- Always set font before drawing text ā default is tiny 10px sans-serif
- textAlign & textBaseline are very powerful ā use center + middle for most UI/game text
- Common mistake #1: Forget to set fillStyle ā black text (default)
- Common mistake #2: Wrong textBaseline ā text looks shifted up/down unexpectedly
- Common mistake #3: Draw text but forget fillText() or strokeText() ā invisible
- Pro tip: Measure text width for perfect centering
JavaScript
|
0 1 2 3 4 5 6 7 8 |
const metrics = ctx.measureText('Hello World'); const textWidth = metrics.width; ctx.fillText('Hello World', (canvas.width - textWidth)/2, 200); |
Understood Canvas Text Color & Text Alignment fully now? These two features control how almost every piece of text looks and sits in Canvas ā game scores, chart labels, buttons, UI overlays, loaders percentage, everything.
Tell me what you want next ā we can build on this:
- Animated typing text effect?
- Text with gradient fill + shadow + outline?
- Text inside circle / curved text demo?
- Canvas dashboard with aligned labels & numbers?
- Or 15-question Canvas text quiz?
Just say ā we keep going step by step together! š
