The TextMetrics interface represents the dimension of a text in the canvas, as created by the CanvasRenderingContext2D.measureText() method.
Properties
TextMetrics.widthRead only- Is a
doublegiving the calculated width of a segment of inline text in CSS pixels. It takes into account the current font of the context. TextMetrics.actualBoundingBoxLeftRead only- Is a
doublegiving the distance parallel to the baseline from the alignment point given by theCanvasRenderingContext2D.textAlignproperty to the left side of the bounding rectangle of the given text, in CSS pixels. TextMetrics.actualBoundingBoxRightRead only- Is a
doublegiving the distance parallel to the baseline from the alignment point given by theCanvasRenderingContext2D.textAlignproperty to the right side of the bounding rectangle of the given text, in CSS pixels. TextMetrics.fontBoundingBoxAscentRead only- Is a
doublegiving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaselineattribute to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels. TextMetrics.fontBoundingBoxDescentRead only- Is a
doublegiving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaselineattribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels. TextMetrics.actualBoundingBoxAscentRead only- Is a
doublegiving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaselineattribute to the top of the bounding rectangle used to render the text, in CSS pixels. TextMetrics.actualBoundingBoxDescentRead only- Is a
doublegiving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaselineattribute to the bottom of the bounding rectangle used to render the text, in CSS pixels. TextMetrics.emHeightAscentRead only- Is a
doublegiving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaselineproperty to the top of the em square in the line box, in CSS pixels. TextMetrics.emHeightDescentRead only- Is a
doublegiving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaselineproperty to the bottom of the em square in the line box, in CSS pixels. TextMetrics.hangingBaselineRead only- Is a
doublegiving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaselineproperty to the hanging baseline of the line box, in CSS pixels. TextMetrics.alphabeticBaselineRead only- Is a
doublegiving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaselineproperty to the alphabetic baseline of the line box, in CSS pixels. TextMetrics.ideographicBaselineRead only- Is a
doublegiving the distance from the horizontal line indicated by theCanvasRenderingContext2D.textBaselineproperty to the ideographic baseline of the line box, in CSS pixels.
Specifications
| Specification | Status | Comment |
|---|---|---|
| WHATWG HTML Living Standard The definition of 'TextMetrics' in that specification. |
Living Standard | Initial definition |
Browser compatibility
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 4.0 | (Yes) | 1.5 (1.8) | 9.0 | 9.0 | 3.1 |
width |
4.0 | (Yes) | 1.5 (1.8) | 9.0 | 9.0 | 3.1 |
actualBoundingBoxLeft,actualBoundingBoxRight,fontBoundingBoxAscent,fontBoundingBoxDescent,actualBoundingBoxAscent,actualBoundingBoxDescent,emHeightAscent,emHeightDescent,hangingBaseline,alphabeticBaseline,ideographicBaseline |
(Yes)[1] | ? | No support[2] | ? | ? | ? |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 2.1 | (Yes) | 1.0 (1.8) | ? | 10.0 | 3.2 |
width |
2.1 | (Yes) | 1.0 (1.8) | ? | 10.0 | 3.2 |
actualBoundingBoxLeft,actualBoundingBoxRight,fontBoundingBoxAscent,fontBoundingBoxDescent,actualBoundingBoxAscent,actualBoundingBoxDescent,emHeightAscent,emHeightDescent,hangingBaseline,alphabeticBaseline,ideographicBaseline |
? | ? | No support[2] | ? | ? | ? |
[1] To turn on advanced text metrics, set the flag ExperimentalCanvasFeatures to true.
[2] Gecko does not implement this feature yet. See the related bug 1102584.
See also
- Creator method in
CanvasRenderingContext2D. - The
<canvas>element and its associated interface,HTMLCanvasElement
Document Tags and Contributors
Tags:
Contributors to this page:
RefinedSoftwareLLC,
mattwojo,
Sebastianz,
fscholz,
kscarfone,
teoli,
orian,
Sheppy,
Brettz9
Last updated by:
RefinedSoftwareLLC,