W3cubDocs

/Web APIs

TextMetrics

The TextMetrics interface represents the dimensions of a piece of text in the canvas; a TextMetrics instance can be retrieved using the CanvasRenderingContext2D.measureText() method.

Instance properties

TextMetrics.width Read only

Returns the width of a segment of inline text in CSS pixels. It takes into account the current font of the context.

TextMetrics.actualBoundingBoxLeft Read only

Distance parallel to the baseline from the alignment point given by the CanvasRenderingContext2D.textAlign property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.

TextMetrics.actualBoundingBoxRight Read only

Returns the distance from the alignment point given by the CanvasRenderingContext2D.textAlign property to the right side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline.

TextMetrics.fontBoundingBoxAscent Read only

Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels.

TextMetrics.fontBoundingBoxDescent Read only

Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels.

TextMetrics.actualBoundingBoxAscent Read only

Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the bounding rectangle used to render the text, in CSS pixels.

TextMetrics.actualBoundingBoxDescent Read only

Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels.

TextMetrics.emHeightAscent Read only

Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the top of the em square in the line box, in CSS pixels.

TextMetrics.emHeightDescent Read only

Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the bottom of the em square in the line box, in CSS pixels.

TextMetrics.hangingBaseline Read only

Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the hanging baseline of the line box, in CSS pixels.

TextMetrics.alphabeticBaseline Read only

Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the alphabetic baseline of the line box, in CSS pixels.

TextMetrics.ideographicBaseline Read only

Returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the ideographic baseline of the line box, in CSS pixels.

Examples

Baselines illustrated

This example demonstrates the baselines the TextMetrics object holds. The default baseline is the alphabeticBaseline. See also the CanvasRenderingContext2D.textBaseline property.

HTML

html

<canvas id="canvas" width="550" height="500"></canvas>

JavaScript

js

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

const baselinesAboveAlphabetic = [
  "fontBoundingBoxAscent",
  "actualBoundingBoxAscent",
  "emHeightAscent",
  "hangingBaseline",
];
const baselinesBelowAlphabetic = [
  "ideographicBaseline",
  "emHeightDescent",
  "actualBoundingBoxDescent",
  "fontBoundingBoxDescent",
];
const baselines = [...baselinesAboveAlphabetic, ...baselinesBelowAlphabetic];
ctx.font = "25px serif";
ctx.strokeStyle = "red";

baselines.forEach((baseline, index) => {
  const text = `Abcdefghijklmnop (${baseline})`;
  const textMetrics = ctx.measureText(text);
  const y = 50 + index * 50;
  ctx.beginPath();
  ctx.fillText(text, 0, y);

  const baselineMetricValue = textMetrics[baseline];
  if (baselineMetricValue === undefined) {
    return;
  }

  const lineY = baselinesBelowAlphabetic.includes(baseline)
    ? y + Math.abs(baselineMetricValue)
    : y - Math.abs(baselineMetricValue);
  ctx.moveTo(0, lineY);
  ctx.lineTo(550, lineY);
  ctx.stroke();
});

Result

Measuring text width

When measuring the x-direction of a piece of text, the sum of actualBoundingBoxLeft and actualBoundingBoxRight can be wider than the width of the inline box (width), due to slanted/italic fonts where characters overhang their advance width.

It can therefore be useful to use the sum of actualBoundingBoxLeft and actualBoundingBoxRight as a more accurate way to get the absolute text width:

js

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const text = "Abcdefghijklmnop";
ctx.font = "italic 50px serif";
const textMetrics = ctx.measureText(text);

console.log(textMetrics.width);
// 459.8833312988281

console.log(
  textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
);
// 462.8833333333333

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
TextMetrics 2 12 1.5 9 9 4 ≤37 18 31 10.1 3.2 1.0
actualBoundingBoxAscent 77 79 74 No 64 11.1 77 77 79 55 11.3 12.0
actualBoundingBoxDescent 77 79 74 No 64 11.1 77 77 79 55 11.3 12.0
actualBoundingBoxLeft 77 79 74 No 64 11.1 77 77 79 55 11.3 12.0
actualBoundingBoxRight 77 79 74 No 64 11.1 77 77 79 55 11.3 12.0
alphabeticBaseline 118 118 116 No 104 11.1 118 118 116 No 11.3 No
emHeightAscent 77 79 118 No 64 11.1 No 77 118 No 11.3 No
emHeightDescent 77 79 118 No 64 11.1 No 77 118 No 11.3 No
fontBoundingBoxAscent 87 87 116 No 73 11.1 87 87 116 62 11.3 14.0
fontBoundingBoxDescent 87 87 116 No 73 11.1 87 87 116 62 11.3 14.0
hangingBaseline 118 118 116 No 104 11.1 118 118 116 No 11.3 No
ideographicBaseline 118 118 116 No 104 11.1 118 118 116 No 11.3 No
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