HTML canvas textBaseline attribute
Definition and Usage
The textBaseline attribute 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 ordinary letter baseline. |
| top | The text baseline is the top of the em box. |
| hanging | The text baseline is the hanging baseline. |
| middle | The text baseline is the center of the em box. |
| ideographic | The text baseline is the ideographic baseline. |
| bottom | The text baseline is 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 this 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.
