TextMetrics

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

* Some parts of this feature may have varying levels of support.

Note: This feature is available inWeb Workers.

TheTextMetrics interface represents the dimensions of a piece of text in the canvas; aTextMetrics instance can be retrieved using theCanvasRenderingContext2D.measureText() method.

Instance properties

TextMetrics.widthRead only: Returns the width of a segment of inline text in CSS pixels. It takes into account the current font of the context.
TextMetrics.actualBoundingBoxLeftRead only: Distance parallel to the baseline from the alignment point given by theCanvasRenderingContext2D.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.actualBoundingBoxRightRead only: Returns the distance from the alignment point given by theCanvasRenderingContext2D.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.fontBoundingBoxAscentRead only: Returns the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline attribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels.
TextMetrics.fontBoundingBoxDescentRead only: Returns the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels.
TextMetrics.actualBoundingBoxAscentRead only: Returns the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline attribute to the top of the bounding rectangle used to render the text, in CSS pixels.
TextMetrics.actualBoundingBoxDescentRead only: Returns the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels.
TextMetrics.emHeightAscentRead only: Returns the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline property to the top of theem square in the line box, in CSS pixels.
TextMetrics.emHeightDescentRead only: Returns the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline property to the bottom of theem square in the line box, in CSS pixels.
TextMetrics.hangingBaselineRead only: Returns the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline property to the hanging baseline of the line box, in CSS pixels.
TextMetrics.alphabeticBaselineRead only: Returns the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline property to thealphabetic baseline of the line box, in CSS pixels.
TextMetrics.ideographicBaselineRead only: Returns the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline property to the ideographic baseline of the line box, in CSS pixels.

Examples

Baselines illustrated

This example demonstrates the baselines theTextMetrics object holds. The default baseline is thealphabeticBaseline. See also theCanvasRenderingContext2D.textBaseline property.

HTML

html

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

JavaScript

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

When measuring the x-direction of a piece of text, the sum ofactualBoundingBoxLeft andactualBoundingBoxRight 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 ofactualBoundingBoxLeft andactualBoundingBoxRight as a more accurate way to get the absolute text width:

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.8833312988281console.log(  textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,);// 462.8833333333333

Specifications

Specification
HTML # textmetrics

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on⁨Feb 4, 2025⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換