Propriété : CanvasRenderingContext2D.textBaseline

Contient le mode d'affichage de la ligne de base des textes dans le canvas

Compatible tous navigateurs

Oui

Description
Contient le mode d'affichage de la ligne d'appui des textes dans le canvas.

Par défaut, la valeur est alphabetic

Les autres valeurs possibles sont
middle
bottom
top

Voir l'exemple pour comprendre les différents alignements

Exemple 1 : Les différentes lignes d'appui des textes

Code source

<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>

Résultat

Emulation de la console

Explication

Utilise le tableau des possibilités pour afficher la ligne d'appui

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 25/09/2017