HTML5 Canvas Text

3 min readApr 22, 2021

How to add some text and style it on my Canvas?

Let’s see what we can do with the text on our canvas.

Html with style.scss and script.js

<html lang="en">
<head>
    <title>Canvas Text</title>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <canvas id="c" width="800" height="600">
        This is a message for old browsers
    </canvas>

    <script src="script.js"></script>
</body>
</html>

Style.css

#c {
    border: 1px solid;
    display: block;
    width: 800px;
    height: 600px;
    margin: 0 auto;
}

Canvas Text

We can add a simple text to Canvas with two functions

context.fillText("Lorem ipsum", x, y);
context.strokeText("Lorem ipsum", 10, 200);

Now the question is how to make it visible

context.font = "45px Verdana";
context.fillText("Text #3", 10, 100);
context.strokeText("Text #4", 10, 200);

There are 4 possible parameters you can set for font.style

style
weight
size
family

/**
 * context.font = "font-style font-weight font-size font-family"
 */
context.font = "italic lighter 30px courier";
context.fillText("Text #6", 10, 400);
context.font = "normal bolder 24px arial ";
context.strokeText("Text #7", 10, 500);

By the way you can set one more parameter — max width of the text.

context.strokeText("Text #4", 10, 200);
context.strokeText("Text #5", 10, 300, 50);

3D Text

There is no 3D text on 2D Canvas, so I’ll share how you can cheat a little bit to make it as 3D text.

Our text we want to make 3D

context.font = "normal 600 54px monospace";
context.fillStyle = "purple";
context.fillText("Text #8", 300, 100);

Here we cheat

context.font = "normal 600 54px monospace";
context.fillStyle = "black";
context.fillText("Text #8", 299, 99);
context.fillText("Text #8", 298, 98);
context.fillText("Text #8", 297, 97);
context.fillText("Text #8", 296, 96);

context.fillStyle = "purple";
context.fillText("Text #8", 300, 100);

We can simplify this code and put it in the independent function

function fill3DText(text, x, y, font, color, size) {
   context.font = font;
   context.fillStyle = "black";

   for (let i = 0; i < size; i++) {
      context.fillText(text, x - i, y - i);
   }
   context.fillStyle = color;
   context.fillText(text, x, y);
}

And now we use it

fill3DText(
   "Text #9",
   300, 250,
   "italic 400 40px courier",
   "red",
   10
);

Text positioning

Horizontal align

context.textAlign = "start";
context.textAlign = "center";
context.textAlign = "left";
context.textAlign = "end";
context.textAlign = "right";

Vertical align

context.textBaseline = "alphabetic";
context.textBaseline = "top";
context.textBaseline = "hanging";
context.textBaseline = "middle";
context.textBaseline = "ideographic";
context.textBaseline = "bottom";