Chapter 47: Canvas Text Alignment
Canvas Text Alignment in the clearest, most patient, step-by-step way possible.
Imagine I’m sitting right next to you with my laptop open. We’re going to build every concept together — slowly, with tiny complete runnable examples you can copy-paste immediately. No skipping steps, no magic, just plain English explanations, visual thinking, common beginner traps, and repeated patterns until text alignment in Canvas feels completely natural and easy to control.
Canvas Text Alignment – From Zero to Confident
1. The single most important sentence about text alignment in Canvas
Text alignment in Canvas controls where the text is positioned relative to the (x, y) coordinates you give it.
You tell Canvas:
- “I’m giving you an x coordinate — should the text be left-aligned, centered, or right-aligned to that x?”
- “I’m giving you a y coordinate — should the text sit above, on, or below that y line?”
That’s it — two properties control everything:
- textAlign → horizontal alignment (left/center/right)
- textBaseline → vertical alignment (top/middle/bottom/etc.)
Both properties affect where the text is painted relative to the point (x, y) you pass to fillText() or strokeText().
2. The two properties you will use 95% of the time
| Property | What it controls | Common values | Default value | Most useful for |
|---|---|---|---|---|
| textAlign | Horizontal position relative to x | ‘left’ / ‘center’ / ‘right’ | ‘start’ (usually left) | Centering text |
| textBaseline | Vertical position relative to y | ‘top’ / ‘middle’ / ‘alphabetic’ / ‘bottom’ | ‘alphabetic’ | True vertical centering |
Quick rule of thumb (memorize this):
- Want text perfectly centered both horizontally and vertically? → textAlign = ‘center’ → textBaseline = ‘middle’
3. Minimal complete example – see alignment in action
Copy-paste and run this — it shows every common alignment combination with labels.
|
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 Alignment Explained</title> <style> canvas { border: 1px solid #ccc; background: #f8f9fa; display: block; margin: 40px auto; } </style> </head> <body> <canvas id="c" width="900" height="500"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); // Center cross (helps visualize) ctx.strokeStyle = '#999'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(canvas.width/2, 0); ctx.lineTo(canvas.width/2, canvas.height); ctx.moveTo(0, canvas.height/2); ctx.lineTo(canvas.width, canvas.height/2); ctx.stroke(); ctx.font = 'bold 40px Arial'; // ─── Horizontal alignment examples (textAlign) ctx.textBaseline = 'middle'; // we'll fix vertical for clarity // left-aligned (default behavior) ctx.textAlign = 'left'; ctx.fillStyle = '#2196F3'; ctx.fillText('left-aligned', 300, 100); ctx.fillText('(x=300 is left edge)', 300, 140); // center-aligned ctx.textAlign = 'center'; ctx.fillStyle = '#4CAF50'; ctx.fillText('center-aligned', 300, 200); ctx.fillText('(x=300 is exact center)', 300, 240); // right-aligned ctx.textAlign = 'right'; ctx.fillStyle = '#F44336'; ctx.fillText('right-aligned', 300, 300); ctx.fillText('(x=300 is right edge)', 300, 340); // ─── Vertical alignment examples (textBaseline) ctx.textAlign = 'center'; // fix horizontal for clarity // baseline = alphabetic (default – bottom of letters) ctx.textBaseline = 'alphabetic'; ctx.fillStyle = '#673AB7'; ctx.fillText('alphabetic (default)', 600, 100); // baseline = top ctx.textBaseline = 'top'; ctx.fillStyle = '#FF9800'; ctx.fillText('top', 600, 200); // baseline = middle (true vertical center) ctx.textBaseline = 'middle'; ctx.fillStyle = '#009688'; ctx.fillText('middle (best for centering)', 600, 300); // baseline = bottom ctx.textBaseline = 'bottom'; ctx.fillStyle = '#E91E63'; ctx.fillText('bottom', 600, 400); // Labels ctx.font = '20px Arial'; ctx.fillStyle = '#333'; ctx.textAlign = 'center'; ctx.textBaseline = 'alphabetic'; ctx.fillText('Horizontal alignment (textAlign)', 300, 40); ctx.fillText('Vertical alignment (textBaseline)', 600, 40); </script> </body> </html> |
What you should see & remember forever:
- Left-aligned → text starts at x=300
- Center-aligned → text is perfectly centered around x=300
- Right-aligned → text ends at x=300
- Alphabetic baseline → text sits on the line (like normal writing)
- Top baseline → top of text touches the line
- Middle baseline → true vertical center (most useful for centering)
- Bottom baseline → bottom of text touches the line
4. Common real-world patterns you’ll reuse
Pattern 1 – Perfectly centered title
|
0 1 2 3 4 5 6 7 8 9 10 |
ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = 'bold 60px Arial'; ctx.fillStyle = '#2196F3'; ctx.fillText('Centered Title', canvas.width/2, canvas.height/2); |
Pattern 2 – Outlined glowing text
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeStyle = '#000'; ctx.lineWidth = 10; ctx.strokeText('GLOW', cx, cy); ctx.fillStyle = '#FFEB3B'; ctx.fillText('GLOW', cx, cy); |
Pattern 3 – Text on button
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Button rectangle ctx.fillStyle = '#4CAF50'; ctx.fillRect(200, 150, 200, 80); // Centered text inside button ctx.fillStyle = 'white'; ctx.font = 'bold 32px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Click Me', 300, 190); // y = 150 + 80/2 |
5. Your three tiny practice tasks (10–15 min each)
Task 1 – Centered heading Fill canvas with light blue Draw large centered text “Canvas Text Alignment” in dark blue Use center + middle
Task 2 – Baseline demo Draw one horizontal gray line across the middle Draw the same text “Baseline Test” three times on that line:
- once with textBaseline = ‘top’
- once with textBaseline = ‘middle’
- once with textBaseline = ‘alphabetic’ Label each one
Task 3 – Button with text Draw a rounded gray rectangle Inside it draw white centered text “Submit” Make sure text is perfectly vertically centered in the button
Paste any of them here when you finish — I’ll review it like we’re pair-programming together.
Which part still feels a little slippery?
- Difference between textAlign vs textBaseline?
- Why middle baseline is best for vertical centering?
- How alphabetic baseline behaves differently?
- Making text look centered in buttons/boxes?
- Something else?
Tell me — we’ll stay on text alignment until you feel super confident placing text exactly where you want it.
You’re doing really well — mastering alignment is one of the biggest “aha” moments in Canvas text! 🚀
