Produire du texte dans CANVAS

Votre navigateur est obsolète

Le code de la fonction JS (extraits)

Le canevas fait 300 par 300. Les variables X et Y représentent toujours la largeur et la hauteur de CANVAS

...
	contexte.textAlign ='center'; 
	contexte.textBaseline = 'middle'; 
	contexte.font = " bold italic 80px arial" ; 
	contexte.fillStyle = 'gold'; 
	contexte.strokeStyle ='gold'; 
	contexte.lineWidth = 5; 
	contexte.shadowColor = 'grey'; // couleur ombrage
	contexte.shadowOffsetX = 10 ; 
	contexte.shadowOffsetY = 10 ; 
	contexte.shadowBlur = 10 ; 
	contexte.fillText('Hello', X/2, Y/3) ; 
	contexte.strokeText('world',X/2, Y/3*2); 
...

Commentaire du code

Ici on utilise plusieurs propriétés de la bibliothèque Canvas.

Chaque mot se répartit horizontalement et verticalement autour de son point de référence car ici textAlign= 'center' et textBaseline= 'middle'

Mise en forme du texte grâce à la propriété font qui fonctionne exactement comme la méga propriété font de CSS.

Syntaxe

Les valeurs possibles de la propriété textAlign sont : left / center /right
Les valeurs possible de la propriété textBaseline sont : top / middle / bottom

Rappel CSS

La méga propriété font remplace les propriétés élémentaires suivantes : font-style, font-variant, font-weight, font-size, font-family.
Exemple : font : italic small-caps bold 24pt Arial ;
Remarque : il faut respecter l'ordre mais il n'est pas obligatoire qu'il y ait 5 valeurs !

Retour menu