Tutorials Exercises Get Certified Services Menu
Log in
Sign Up Spaces Bootcamps

Canvas measureText() Method

❮ Canvas Reference


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



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)


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