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.
Properties
TextMetrics.width
Read only- Is a
double
giving the calculated width of a segment of inline text in CSS pixels. It takes into account the current font of the context. TextMetrics.actualBoundingBoxLeft
Read only- Is a
double
giving the distance from the alignment point given by theCanvasRenderingContext2D.textAlign
property to the left side of the bounding rectangle of the given text, in CSS pixels. The distance is measured parallel to the baseline. TextMetrics.actualBoundingBoxRight
Read only- Is a
double
giving 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.fontBoundingBoxAscent
Read only- Is a
double
giving 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.fontBoundingBoxDescent
Read only- Is a
double
giving 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.actualBoundingBoxAscent
Read only- Is a
double
giving 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.actualBoundingBoxDescent
Read only- Is a
double
giving 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.emHeightAscent
Read only- Is a
double
giving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline
property to the top of the em square in the line box, in CSS pixels. TextMetrics.emHeightDescent
Read only- Is a
double
giving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline
property to the bottom of the em square in the line box, in CSS pixels. TextMetrics.hangingBaseline
Read only- Is a
double
giving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline
property to the hanging baseline of the line box, in CSS pixels. TextMetrics.alphabeticBaseline
Read only- Is a
double
giving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaseline
property to the alphabetic baseline of the line box, in CSS pixels. TextMetrics.ideographicBaseline
Read only- Is a
double
giving 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 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>
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(function (baseline, index) {
let text = 'Abcdefghijklmnop (' + baseline + ')';
let textMetrics = ctx.measureText(text);
let y = 50 + index * 50;
ctx.beginPath();
ctx.fillText(text, 0, y);
let lineY = y - Math.abs(textMetrics[baseline]);
if (baselinesBelowAlphabetic.includes(baseline)) {
lineY = y + Math.abs(textMetrics[baseline]);
}
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:
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(Math.abs(textMetrics.actualBoundingBoxLeft) +
Math.abs(textMetrics.actualBoundingBoxRight));
// 462.8833333333333
Specifications
Specification |
---|
HTML Living StandardThe definition of 'TextMetrics' in that specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
TextMetrics
|
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 1.5 |
IE
Full support 9 |
Opera
Full support 9 |
Safari
Full support 3.1 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 31 |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
Chrome Full support 77 Full support 77 No support ? — 77 Disabled' Until version 77 (exclusive): this feature is behind the |
Edge
Full support 79 |
Firefox
Full support 74 |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
Full support 77 |
Chrome Android Full support 77 Full support 77 No support ? — 77 Disabled' Until version 77 (exclusive): this feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support 12.0 | |
Chrome Full support 77 Full support 77 No support ? — 77 Disabled' Until version 77 (exclusive): this feature is behind the |
Edge
Full support 79 |
Firefox
Full support 74 |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
Full support 77 |
Chrome Android Full support 77 Full support 77 No support ? — 77 Disabled' Until version 77 (exclusive): this feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support 12.0 | |
Chrome Full support 77 Full support 77 No support ? — 77 Disabled' Until version 77 (exclusive): this feature is behind the |
Edge
Full support 79 |
Firefox
Full support 74 |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
Full support 77 |
Chrome Android Full support 77 Full support 77 No support ? — 77 Disabled' Until version 77 (exclusive): this feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support 12.0 | |
Chrome Full support 77 Full support 77 No support ? — 77 Disabled' Until version 77 (exclusive): this feature is behind the |
Edge
Full support 79 |
Firefox
Full support 74 |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
Full support 77 |
Chrome Android Full support 77 Full support 77 No support ? — 77 Disabled' Until version 77 (exclusive): this feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support 12.0 | |
Chrome Full support Yes Full support Yes Disabled' This feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 74 Full support 74 Disabled' From version 74: this feature is behind the |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
No support No |
Chrome Android Full support Yes Full support Yes Disabled' This feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
No support No | |
Chrome Full support Yes Full support Yes Disabled' This feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 74 Full support 74 Disabled' From version 74: this feature is behind the |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
No support No |
Chrome Android Full support Yes Full support Yes Disabled' This feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
No support No | |
Chrome Full support Yes Full support Yes Disabled' This feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 74 Full support 74 Disabled' From version 74: this feature is behind the |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
No support No |
Chrome Android Full support Yes Full support Yes Disabled' This feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
No support No | |
Chrome Full support Yes Full support Yes Disabled' This feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 74 Full support 74 Disabled' From version 74: this feature is behind the |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
No support No |
Chrome Android Full support Yes Full support Yes Disabled' This feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
No support No | |
Chrome Full support Yes Full support Yes Disabled' This feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 74 Full support 74 Disabled' From version 74: this feature is behind the |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
No support No |
Chrome Android Full support Yes Full support Yes Disabled' This feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
No support No |
Samsung Internet Android
No support No | |
Chrome Full support Yes Full support Yes Disabled' This feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 74 Full support 74 Disabled' From version 74: this feature is behind the |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
No support No |
Chrome Android Full support Yes Full support Yes Disabled' This feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
No support No | |
Chrome Full support Yes Full support Yes Disabled' This feature is behind the |
Edge Full support 79 Full support 79 Disabled' From version 79: this feature is behind the |
Firefox Full support 74 Full support 74 Disabled' From version 74: this feature is behind the |
IE
No support No |
Opera
? |
Safari
Full support Yes |
WebView Android
No support No |
Chrome Android Full support Yes Full support Yes Disabled' This feature is behind the |
Firefox Android
No support No |
Opera Android
? |
Safari iOS
Full support Yes |
Samsung Internet Android
No support No | |
Chrome
Full support 4 |
Edge
Full support 12 |
Firefox
Full support 1.5 |
IE
Full support 9 |
Opera
Full support 9 |
Safari
Full support 3.1 |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 31 |
Opera Android
Full support Yes |
Safari iOS
Full support 3.2 |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
See also
- Creator method in
CanvasRenderingContext2D
- The
<canvas>
element and its associated interface,HTMLCanvasElement
TextMetrics by Mozilla Contributors is licensed under CC-BY-SA 2.5.