Chapter 45: Canvas Text
Canvas Text in the clearest, most patient, step-by-step way possible.
Imagine I’m sitting right next to you with my screen open. We’re going to build every concept together — slowly, with tiny complete examples you can copy-paste and run immediately. No skipping steps, no magic, just plain English explanations, visual thinking, common beginner traps, and repeated patterns until drawing and controlling text on Canvas feels completely natural and easy.
Canvas Text – Complete Beginner-to-Confident Guide
1. The single most important sentence about text in Canvas
Text in Canvas is painted pixels — not live editable DOM text like in HTML or SVG.
Once you call fillText() or strokeText(), those letters become just pixels on the bitmap. You cannot later say “change this word’s color” or “make this letter bigger” without redrawing everything. That is why text is usually drawn last in the rendering order (after background/shapes), and why animations involving changing text usually require a full redraw loop.
2. The two main commands you will use 99% of the time
| Command | What it does | Filled? | Outlined? | Most common use case |
|---|---|---|---|---|
| fillText(text, x, y) | Fills the text with current fillStyle | Yes | No | Normal solid-color text |
| strokeText(text, x, y) | Strokes (outlines) the text | No | Yes | Outline / border text, glowing letters |
Both commands use the current state:
- ctx.font
- ctx.fillStyle / ctx.strokeStyle
- ctx.textAlign
- ctx.textBaseline
- ctx.lineWidth (for strokeText)
3. Minimal complete text example (copy → run)
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas – First Text</title> <style> canvas { border: 1px solid #ccc; background: #f8f9fa; display: block; margin: 40px auto; } </style> </head> <body> <canvas id="c" width="600" height="300"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); // Center helpers const cx = canvas.width / 2; const cy = canvas.height / 2; // Basic filled text ctx.font = 'bold 60px Arial'; ctx.fillStyle = '#2196F3'; ctx.textAlign = 'center'; // left | center | right ctx.textBaseline = 'middle'; // top | hanging | middle | alphabetic | ideographic | bottom ctx.fillText('Hello Canvas!', cx, cy); // Outlined text (stroke) ctx.font = 'bold 60px Arial'; ctx.strokeStyle = '#F44336'; ctx.lineWidth = 6; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeText('Outlined Text', cx, cy + 80); // Label baseline ctx.strokeStyle = '#999'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, cy); ctx.lineTo(canvas.width, cy); ctx.stroke(); ctx.fillStyle = '#666'; ctx.font = '16px Arial'; ctx.fillText('Baseline (middle)', 80, cy - 10); </script> </body> </html> |
What you should see & remember forever:
- Blue text centered horizontally (textAlign = ‘center’) and vertically (textBaseline = ‘middle’)
- Red outlined text below it
- Thin gray line shows the baseline — text sits on this line, not centered inside it
4. Most important text properties (copy this cheat sheet)
| Property | What it controls | Common values | Default | Very useful? |
|---|---|---|---|---|
| font | Size, weight, family | ‘bold 48px Arial’, ‘italic 36px serif’ | ’10px sans-serif’ | ★★★★★ |
| fillStyle | Color of filled text | ‘#2196F3’, ‘rgba(33,150,243,0.8)’ | black | ★★★★★ |
| strokeStyle | Color of outlined text | ‘#F44336’, ‘gold’ | black | ★★★★☆ |
| lineWidth | Thickness of stroke outline | 2, 6, 12 | 1 | ★★★★☆ |
| textAlign | Horizontal alignment to x coordinate | ‘left’ / ‘center’ / ‘right’ / ‘start’ / ‘end’ | ‘start’ | ★★★★★ |
| textBaseline | Vertical alignment to y coordinate | ‘top’ / ‘hanging’ / ‘middle’ / ‘alphabetic’ / ‘ideographic’ / ‘bottom’ | ‘alphabetic’ | ★★★★★ |
| direction | Text direction (rare) | ‘ltr’ / ‘rtl’ / ‘inherit’ | ‘inherit’ | ★☆☆☆☆ |
Most common combination for centered text:
|
0 1 2 3 4 5 6 7 8 |
ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Centered', canvas.width/2, canvas.height/2); |
5. Example 2 – Text styles showcase (copy-paste & play)
|
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 |
<canvas id="c2" width="900" height="500"></canvas> <script> const canvas = document.getElementById('c2'); const ctx = canvas.getContext('2d'); // Helper to draw labeled text function drawText(x, y, text, font, fillColor, strokeColor = null, lineWidth = 0, align = 'left', baseline = 'alphabetic') { ctx.font = font; ctx.textAlign = align; ctx.textBaseline = baseline; if (fillColor) { ctx.fillStyle = fillColor; ctx.fillText(text, x, y); } if (strokeColor) { ctx.strokeStyle = strokeColor; ctx.lineWidth = lineWidth; ctx.strokeText(text, x, y); } } // 1. Basic large text drawText(450, 100, 'Large Bold Text', 'bold 60px Arial', '#2196F3'); // 2. Outlined text drawText(450, 200, 'Thick Outline', 'bold 60px Arial', null, '#F44336', 12); // 3. Filled + thin outline drawText(450, 300, 'Fill + Stroke', 'bold 60px Arial', '#4CAF50', '#2E7D32', 4); // 4. Different baseline positions ctx.strokeStyle = '#999'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(100, 380); ctx.lineTo(800, 380); ctx.stroke(); // baseline drawText(200, 380, 'baseline = alphabetic', '30px Arial', '#333', null, 0, 'center', 'alphabetic'); drawText(400, 380, 'baseline = top', '30px Arial', '#333', null, 0, 'center', 'top'); drawText(600, 380, 'baseline = middle', '30px Arial', '#333', null, 0, 'center', 'middle'); </script> |
Key lessons from this example:
- textBaseline controls where the y coordinate points
- ‘alphabetic’ (default) → bottom of letters (like normal text)
- ‘middle’ → true vertical center — most useful for centering
- ‘top’ → top of the text block
- strokeText + fillText together = outlined filled text (stroke first or fill first changes look slightly)
6. Your three tiny practice tasks (10–15 min each)
Task 1 – Centered title Fill canvas with light gray background Draw big bold centered text “Welcome to Canvas” in dark blue Use textAlign = ‘center’ and textBaseline = ‘middle’
Task 2 – Outlined glowing text Draw large text “GLOW” in yellow fill Add thick red stroke around it Add very thin white stroke on top (draw twice)
Task 3 – Baseline experiment Draw one horizontal gray line across center Draw same text three times on that line using different textBaseline values: ‘top’, ‘middle’, ‘alphabetic’ Label each one
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 fillText vs strokeText?
- How textBaseline actually moves the text relative to y?
- Why centering text is tricky without middle baseline?
- Making outlined text look nice (stroke width / order)?
- Something else?
Tell me — we’ll stay on text until you feel super confident placing, styling, and centering any text you want.
You’re doing really well — text is one of the trickier parts of Canvas, but once you master alignment and baseline it becomes very powerful! 🚀
