How to write text on an HTML5 canvas element with JavaScript?

Spread the love

Sometimes, we want to write text on an HTML5 canvas element with JavaScript.

In this article, we’ll look at how to write text on an HTML5 canvas element with JavaScript.

How to write text on an HTML5 canvas element with JavaScript?

To write text on an HTML5 canvas element with JavaScript, we call the fillText method.

For instance, we write

<canvas id="my-canvas" width="200" height="120"></canvas>

to add a canvas element.

Then we write

const canvas = document.getElementById("my-canvas");
const context = canvas.getContext("2d");

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.fillText("hello", canvas.width / 2 - 17, canvas.height / 2 + 8);

to select the canvas with getElementById.

We get the canvas’ context with getContext.

And then we set the text style by setting the fillStyle property.

We set the font by setting the font property.

Finally, we call fillText to write the 'hello' at the given x and y coordinates.

Conclusion

To write text on an HTML5 canvas element with JavaScript, we call the fillText method.

Leave a Reply

Your email address will not be published. Required fields are marked *