Propriété : CanvasRenderingContext2D.textBaseline

<canvas id="myCanvas" width="300" height="300" style="background-color:#fff"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");
myContext.font="20px arial";
myContext.strokeStyle="#a00";
myContext.lineWidth=1;
myContext.fillStyle="#31528C";

var delta=50;
var values=["alphabetic", "middle", "top", "hanging", "bottom"]
for (var i=0; i<values.length; i++) {
 console.log(i+" "+values[i]);
 myContext.textBaseline=values[i];
 myContext.fillText("Ligne d'appui "+values[i], 20, delta*(i+1));
 myContext.beginPath();
 myContext.moveTo(10, delta*(i+1));
 myContext.lineTo(290, delta*(i+1));
 myContext.stroke();
}
</script>