Canvas Text
fillText() renders filled text and strokeText() renders outlined text. Set font, fillStyle, and textAlign before drawing.
HTML
Beginner
4 min read
Drawing Text on Canvas
Example
const ctx = canvas.getContext("2d");
ctx.font = "bold 32px Arial";
ctx.fillStyle = "#333";
ctx.textAlign = "center";
ctx.fillText("Hello Canvas", canvas.width / 2, 60);
// Outlined text
ctx.font = "48px Georgia";
ctx.strokeStyle = "#007bff";
ctx.lineWidth = 2;
ctx.strokeText("Outlined", 200, 150);
// Measure text width
const metrics = ctx.measureText("Hello");
console.log(metrics.width); Pro Tip
Canvas text does not wrap automatically — split long text into lines and call fillText() once per line.