The CanvasRenderingContext2D
.textBaseline
property of the Canvas 2D API specifies the current text baseline used when drawing text.
Syntax
ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
Options
Possible values:
"top"
- The text baseline is the top of the em square.
"hanging"
- The text baseline is the hanging baseline. (Used by Tibetan and other Indic scripts.)
"middle"
- The text baseline is the middle of the em square.
"alphabetic"
- The text baseline is the normal alphabetic baseline. Default value.
"ideographic"
- The text baseline is the ideographic baseline; this is the bottom of the body of the characters, if the main body of characters protrudes beneath the alphabetic baseline. (Used by Chinese, Japanese, and Korean scripts.)
"bottom"
- The text baseline is the bottom of the bounding box. This differs from the ideographic baseline in that the ideographic baseline doesn't consider descenders.
The default value is "alphabetic"
.
Examples
Comparison of property values
This example demonstrates the various textBaseline
property values.
HTML
<canvas id="canvas" width="550" height="500"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'];
ctx.font = '36px serif';
ctx.strokeStyle = 'red';
baselines.forEach(function (baseline, index) {
ctx.textBaseline = baseline;
const y = 75 + index * 75;
ctx.beginPath();
ctx.moveTo(0, y + 0.5);
ctx.lineTo(550, y + 0.5);
ctx.stroke();
ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y);
});
Result
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'CanvasRenderingContext2D.textBaseline' in that specification. | Living Standard |
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
textBaseline
|
Chrome
Full support Yes |
Edge
Full support 12 |
Firefox
Full support 3.5 |
IE
Full support 9 |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
See also
- The interface defining this property:
CanvasRenderingContext2D
CanvasRenderingContext2D.textBaseline by Mozilla Contributors is licensed under CC-BY-SA 2.5.