Propriété textBaseline du Canvas

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

//Dessinez une ligne rouge à y=100
ctx.strokeStyle = "red";
ctx.moveTo(5, 100);
ctx.lineTo(395, 100);
ctx.stroke();

ctx.font = "20px Arial"

//Placez chaque mot à y=100 avec différentes valeurs de textBaseline
ctx.textBaseline = "top";
ctx.fillText("Haut", 5, 100);
ctx.textBaseline = "bottom";
ctx.fillText("Bas", 50, 100);
ctx.textBaseline = "middle";
ctx.fillText("Milieu", 120, 100);
ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabétique", 190, 100);
ctx.textBaseline = "hanging";
ctx.fillText("Suspendu", 290, 100);