Canvas Text
Canvas draws text as shapes using fillText() and strokeText(), with the font property controlling typeface, size, and style.
Drawing Text on a Canvas
Unlike HTML text, text drawn on a canvas isn't part of the DOM — it's painted onto the pixel grid, just like a rectangle or a path. The Canvas 2D API gives you two drawing methods, fillText() for solid text and strokeText() for outlined text, plus a font property that controls how the text looks before you draw it.
fillText() and strokeText()
Both methods share the same signature: fillText(text, x, y [, maxWidth]) and strokeText(text, x, y [, maxWidth]). The x and y coordinates position the text according to the current textAlign and textBaseline settings (by default, x is the left edge and y is the alphabetic baseline of the first line). The optional maxWidth compresses the text horizontally if it would otherwise be wider than that value.
Example 1: Filled and Stroked Text
<!DOCTYPE html>
<html>
<body>
<canvas id="textCanvas" width="400" height="160" style="border:1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById("textCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "48px Arial";
ctx.fillStyle = "#222222";
ctx.fillText("Hello Canvas", 20, 60);
ctx.strokeStyle = "#e63946";
ctx.lineWidth = 2;
ctx.strokeText("Hello Canvas", 20, 120);
</script>
</body>
</html>The font property accepts the same shorthand syntax as CSS font: an optional style/weight, a required size, and a required font family, such as "italic bold 32px Georgia". If you omit the size or family, the browser falls back to its default (usually 10px sans-serif), so always set both explicitly.
- font must include both a size and a font-family, e.g. "bold 24px Verdana" — omitting either falls back to canvas defaults.
- textAlign (start, end, left, right, center) controls how text is positioned horizontally relative to x.
- textBaseline (top, middle, alphabetic, bottom, hanging, ideographic) controls vertical alignment relative to y.
- measureText(text) returns a TextMetrics object so you can measure width before drawing, useful for centering text manually.
- Canvas text does not wrap automatically — long strings must be split and drawn line by line yourself.
Example 2: Centered Text with measureText()
<!DOCTYPE html>
<html>
<body>
<canvas id="centeredCanvas" width="300" height="100" style="border:1px solid #ccc;"></canvas>
<script>
const ctx2 = document.getElementById("centeredCanvas").getContext("2d");
const w = 300, h = 100;
ctx2.font = "32px 'Trebuchet MS'";
ctx2.textAlign = "center";
ctx2.textBaseline = "middle";
ctx2.fillStyle = "#1d3557";
ctx2.fillText("Centered", w / 2, h / 2);
const metrics = ctx2.measureText("Centered");
console.log("Text width:", metrics.width);
</script>
</body>
</html>Example 3: Wrapping Long Text Manually
<!DOCTYPE html>
<html>
<body>
<canvas id="wrapCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>
<script>
function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
const words = text.split(" ");
let line = "";
for (const word of words) {
const testLine = line + word + " ";
if (ctx.measureText(testLine).width > maxWidth && line !== "") {
ctx.fillText(line, x, y);
line = word + " ";
y += lineHeight;
} else {
line = testLine;
}
}
ctx.fillText(line, x, y);
}
const ctx3 = document.getElementById("wrapCanvas").getContext("2d");
ctx3.font = "18px Arial";
wrapText(ctx3, "Canvas text does not wrap on its own, so long paragraphs need a helper function like this one.", 10, 30, 260, 24);
</script>
</body>
</html>Exercise: Canvas Text
Which property sets the font size and family used for canvas text?
