The TextMetrics
interface represents the dimensions of a piece of text in the canvas, as created by 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 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. TextMetrics.actualBoundingBoxRight
Read only- Is a
double
giving the distance parallel to the baseline from the alignment point given by theCanvasRenderingContext2D.textAlign
property to the right side of the bounding rectangle of the given text, in CSS pixels. 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.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'TextMetrics' in that specification. |
Living Standard | Initial definition |
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 Yes | 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 |
actualBoundingBoxAscent | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android ? |
actualBoundingBoxDescent | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android ? |
actualBoundingBoxLeft | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android ? |
actualBoundingBoxRight | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android ? |
alphabeticBaseline | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android ? |
emHeightAscent | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android ? |
emHeightDescent | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android ? |
fontBoundingBoxAscent | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android ? |
fontBoundingBoxDescent | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS No support No | Samsung Internet Android ? |
hangingBaseline | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android ? |
ideographicBaseline | Chrome
Full support
Yes
| Edge No support No | Firefox
No support
No
| IE No support No | Opera ? | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
Yes
| Firefox Android
No support
No
| Opera Android ? | Safari iOS Full support Yes | Samsung Internet Android ? |
width | 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.
- See implementation notes.
- See implementation notes.
- 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