W3Schools.com
THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPJQUERYBOOTSTRAPANGULARXML
 

HTML canvas measureText() Method

HTML canvas Reference HTML Canvas Reference

Example

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

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the measureText() method.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.


Definition and Usage

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

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

HTML canvas Reference HTML Canvas Reference