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.
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.
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.
This example demonstrates the baselines the TextMetrics
object holds. The default baseline is the alphabeticBaseline
. See also the CanvasRenderingContext2D.textBaseline
property.
html
<canvas id="canvas" width="550" height="500"></canvas>
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(); });
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
Specification |
---|
HTML Standard # textmetrics |
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 |
CanvasRenderingContext2D
<canvas>
element and its associated interface, HTMLCanvasElement
© 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