Canvas textBaseline property
Definition and Usage
The textBaseline property sets or returns the current text baseline when drawing text.
The following illustration demonstrates the various baselines supported by the textBaseline attribute:
Note:fillText() or strokeText() When positioning text on the canvas, the specified textBaseline value will be used.
Example
Define a rectangle filled with blue:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//Draw a blue line at position y=100
ctx.strokeStyle="blue";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//Place each word with different textBaseline values at y=200
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
Syntax
Context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
Attribute value
| Value | Description |
|---|---|
| alphabetic | Default. The text baseline is the standard letter baseline. |
| top | The text baseline is at the top of the em box. |
| hanging | The text baseline is the hanging baseline. |
| middle | The text baseline is at the center of the em box. |
| ideographic | The text baseline is the ideographic baseline. |
| bottom | The text baseline is at the bottom of the em box. |
Technical details
| Default value: | alphabetic |
|---|
Browser Support
The numbers in the table indicate the first browser version that fully supports the property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
