W3cubDocs

/DOM

TextMetrics.width

The readonly TextMetrics.width property contains the text's advance width (the width of that inline box) in CSS pixels.

Syntax

readonly metrics.width;

Examples

Given this <canvas> element:

<canvas id="canvas"></canvas>

You can get a TextMetrics object using the following code:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 4 12 1.5 9 9 3.1
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 2 ? ? 4 Yes 3.2 ?

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/width