There are six text baseline options available:Top, Middle, Bottom, Hanging, Alphabetic and Ideographic. If you are writing in the English language, then Top, Middle and Bottom are enough to position the text the way you desire. Hanging, Alphabetic and Ideographic are more relevant if you are trying to display unicode characters.
For a 40 px font size anchored at y=40, this is how each of the baselines will be displayed on the canvas.
There is more to the text baseline than what I have explained here. The HTML5 Specification provides a more detailed explanation if you are interested.
HTML Code
<html>
<head>
<script type="application/javascript">
function init() {
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
ctx.textAlign="start";
ctx.fillStyle = "red";
ctx.font="40px verdana";
// The top of the text will be aligned at y = 40
ctx.textBaseline="top";
ctx.fillText("Believe", 0,40);
// The vertical centre of the text will be aligned at y = 40
ctx.textBaseline="middle";
ctx.fillText("Believe", 150,40);
// The bottom of the text will be aligned at y = 40
ctx.textBaseline="bottom";
ctx.fillText("Believe", 300,40);
}
}
</script>
<title>Specify baseline for text</title>
</head>
<body onload="init();">
<canvas id="canvas" width="900"
height="500"></canvas><br>
</body>
</html>
