Chapter 46: Canvas Text Color
Canvas Text Color 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 controlling text color in Canvas feels completely natural and easy.
Canvas Text Color – Complete Beginner-to-Confident Guide
1. The single most important sentence about text color in Canvas
Text color in Canvas is controlled exactly the same way as any other fill or stroke — using fillStyle for filled text and strokeStyle for outlined text.
There is no special “text color” property. You use:
- ctx.fillStyle = … → color of the letters themselves (most common)
- ctx.strokeStyle = … → color of the outline around the letters (for glowing/decorative text)
Once you set fillStyle or strokeStyle, every fillText() or strokeText() after that will use those colors — until you change the style again.
2. The two main commands that use text color
| Command | What it paints | Uses which color property? | Most common use case |
|---|---|---|---|
| fillText(text, x, y) | Fills the letters with solid or gradient color | fillStyle | Normal readable text |
| strokeText(text, x, y) | Draws only the outline of the letters | strokeStyle | Glowing outline, decorative text |
You can use both on the same text (stroke first or fill first changes the look slightly).
3. Minimal complete text color 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 62 63 64 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas – Text Color Basics</title> <style> canvas { border: 1px solid #ccc; background: #f8f9fa; display: block; margin: 40px auto; } </style> </head> <body> <canvas id="c" width="600" height="400"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); // Center helpers const cx = canvas.width / 2; const cy = canvas.height / 2; // 1. Simple filled text – blue color ctx.font = 'bold 60px Arial'; ctx.fillStyle = '#2196F3'; // ← text color ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Blue Filled Text', cx, cy - 80); // 2. Outlined text – red outline ctx.font = 'bold 60px Arial'; ctx.strokeStyle = '#F44336'; // ← outline color ctx.lineWidth = 8; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.strokeText('Red Outline Text', cx, cy); // 3. Filled + outlined text ctx.font = 'bold 60px Arial'; ctx.fillStyle = '#4CAF50'; // inside color first ctx.fillText('Green + Black', cx, cy + 80); ctx.strokeStyle = '#000'; // outline on top ctx.lineWidth = 6; ctx.strokeText('Green + Black', cx, cy + 80); // Label ctx.font = '20px Arial'; ctx.fillStyle = '#333'; ctx.fillText('fillStyle = text color', 300, 60); ctx.fillText('strokeStyle = outline color', 300, 100); </script> </body> </html> |
What you should see & remember forever:
- Blue text → uses fillStyle
- Red outline text → uses strokeStyle
- Green text with black border → fillStyle first → strokeStyle second (stroke sits on top)
Important order rule When doing both fill + stroke on text: → fillText() first → strokeText() second → If you reverse it, the fill will cover part of the stroke.
4. All possible ways to set text color (cheat sheet)
| Method / Value type | Example code | When to use it |
|---|---|---|
| Named color | ctx.fillStyle = ‘red’ | Quick & readable |
| Hex | ctx.fillStyle = ‘#2196F3’ | Precise color (most common) |
| RGB | ctx.fillStyle = ‘rgb(33, 150, 243)’ | Classic |
| RGBA (with transparency) | ctx.fillStyle = ‘rgba(33,150,243,0.6)’ | Semi-transparent text |
| HSL | ctx.fillStyle = ‘hsl(207, 90%, 54%)’ | Easy hue/saturation/brightness control |
| Linear gradient | ctx.fillStyle = createLinearGradient(…) | Rainbow / shiny text |
| Radial gradient | ctx.fillStyle = createRadialGradient(…) | Glowing / spotlight text |
| Pattern | ctx.fillStyle = createPattern(img, ‘repeat’) | Textured / tiled text |
| currentColor | ctx.fillStyle = ‘currentColor’ | Inherit from CSS color property |
5. Example 2 – Gradient + stroke + transparency showcase
|
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 |
<canvas id="c2" width="800" height="400"></canvas> <script> const canvas = document.getElementById('c2'); const ctx = canvas.getContext('2d'); // Linear gradient text const linear = ctx.createLinearGradient(100, 100, 700, 100); linear.addColorStop(0, '#FFEB3B'); linear.addColorStop(0.5, '#FF9800'); linear.addColorStop(1, '#F44336'); ctx.font = 'bold 80px Arial'; ctx.fillStyle = linear; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('Rainbow Text', 400, 140); // Radial gradient + stroke const radial = ctx.createRadialGradient(400, 280, 20, 400, 280, 200); radial.addColorStop(0, 'white'); radial.addColorStop(0.6, '#673AB7'); radial.addColorStop(1, '#311B92'); ctx.font = 'bold 80px Arial'; ctx.fillStyle = radial; ctx.fillText('Glowing Text', 400, 280); ctx.strokeStyle = '#000'; ctx.lineWidth = 8; ctx.strokeText('Glowing Text', 400, 280); </script> |
Key lessons from this example:
- Gradients work perfectly on text — just assign to fillStyle
- strokeText + fillText together = glowing outlined text
- Radial gradient with small inner radius → nice glow/highlight effect
6. Your three tiny practice tasks (10–15 min each)
Task 1 – Simple colored title Fill canvas with light gray Draw big centered text “Canvas Rocks!” in dark purple Use textAlign = ‘center’ and textBaseline = ‘middle’
Task 2 – Rainbow text Draw large centered text “RAINBOW” Fill it with horizontal linear gradient: red → orange → yellow → green → blue → purple
Task 3 – Glowing outline text Draw large text “GLOW” in white fill Add thick blue radial-gradient stroke around it (or solid blue stroke + blur if you want extra)
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 fillStyle vs strokeStyle for text?
- How to make text centered perfectly every time?
- Using gradients on text?
- Order of fillText vs strokeText?
- Semi-transparent text (RGBA)?
- Something else?
Tell me — we’ll stay on text color until you feel super confident styling any text you imagine.
You’re doing really well — text color is one of the trickier Canvas topics because of baseline & alignment, but once it clicks it becomes very powerful! 🚀
