HtmlHow-ToBeginner · 3 min read

How to Draw Text on Canvas in HTML5: Simple Guide

To draw text on a canvas, get the 2D drawing context using getContext('2d') and use fillText() or strokeText() methods to render text at specified coordinates. You can customize font style, size, and color before drawing the text.

📐

Syntax

Use the fillText(text, x, y [, maxWidth]) method to draw filled text and strokeText(text, x, y [, maxWidth]) to draw outlined text on the canvas. Here:

text: The string to draw.
x and y: Coordinates on the canvas where the text starts.
maxWidth (optional): Maximum width of the text.

Before drawing, set font style with context.font and color with context.fillStyle or context.strokeStyle.

javascript

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '16px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 50, 50);
ctx.strokeStyle = 'red';
ctx.strokeText('Outlined Text', 50, 80);

💻

Example

This example shows how to draw filled and outlined text on a canvas with different colors and fonts.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Text Example</title>
  <style>
    canvas {
      border: 1px solid #ccc;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="400" height="150" aria-label="Canvas showing text drawing example"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    ctx.font = '24px Verdana';
    ctx.fillStyle = 'blue';
    ctx.fillText('Filled Blue Text', 20, 40);

    ctx.font = '20px Georgia';
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 1;
    ctx.strokeText('Outlined Green Text', 20, 80);

    ctx.font = '18px Courier New';
    ctx.fillStyle = 'purple';
    ctx.fillText('Another Text', 20, 120);
  </script>
</body>
</html>

Output

A 400x150 canvas with a blue filled text 'Filled Blue Text' near top-left, a green outlined text 'Outlined Green Text' below it, and a purple filled text 'Another Text' near the bottom.

⚠️

Common Pitfalls

Not setting the font style before drawing text causes default font to be used, which may look unexpected.
Using coordinates outside the canvas area makes text invisible.
Forgetting to get the 2D context with getContext('2d') results in errors.
Confusing fillText (filled text) and strokeText (outlined text) methods.

javascript

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Wrong: No font set, text may look default or small
ctx.fillText('Text without font set', 10, 30);

// Right: Set font before drawing
ctx.font = '20px Arial';
ctx.fillText('Text with font set', 10, 60);

📊

Quick Reference

Remember these key properties and methods for drawing text on canvas:

Property / Method	Description
`context.font`	Sets the font style and size (e.g., '16px Arial')
`context.fillStyle`	Sets the fill color for text
`context.strokeStyle`	Sets the outline color for text
`context.fillText(text, x, y)`	Draws filled text at (x, y)
`context.strokeText(text, x, y)`	Draws outlined text at (x, y)

✅

Key Takeaways

Always get the 2D context with getContext('2d') before drawing.

Set the font style using context.font before drawing text.

Use fillText for filled text and strokeText for outlined text.

Coordinates (x, y) define where the text starts on the canvas.

Check that text coordinates are inside the canvas area to see the text.