Canvas measureText() Method

Example

Check the width of the text, before writing it on the canvas:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
let txt = "Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50)
ctx.fillText(txt, 10, 100);

Try it Yourself »

Se Also:

The font Property (Set text font and size)

The fillStyle Property (Set text color/gradient)

The textAlign Property (Set text alignment)

The textBaseline Property (Set text baseline)

The fillText() Method (Draw the text)

The strokeText() Method (Draw the text)

Description

The measureText() method returns an object that contains the width of the specified text, in pixels.

Tip: Use this method if you need to know the width of a text, before writing it on the canvas.

JavaScript syntax:	context.measureText(text).width;

Parameter Values

Param	Description	Play it
text	The text to be measured	Play it »

Browser Support

The <canvas> element is an HTML5 standard (2014).

measureText() is supported in all modern browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Canvas Reference