W3cubDocs

/Web APIs

TextMetrics: width property

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

Examples

Start with this <canvas> element:

html

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

You can get a TextMetrics object using the following code:

js

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

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
width 2 12 1.5 9 9 4 4.4 18 31 10.1 3.2 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics/width