Latest web development tutorials

HTML canvas measureText () method

HTML canvas Reference Manual HTML canvas Reference Manual

Examples

Before the canvas text output, check the font width:

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"

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

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


Definition and Usage

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

Tip: If you need to output text to the canvas before, I understand the width of the text, use this method.

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

Parameter Value

参数 描述
text 要测量的文本。


HTML canvas Reference Manual HTML canvas Reference Manual