Tuto Canvas : Textes

Dessiner du texte sur canvas HTML5 est très simple. Pour cela, il existe deux méthodes :

• fillText('montext', x, y) produira des lettres.
• strokeText('montext', x, y) produira uniquement le contour des lettres.

Pour appliquer des styles (le font, alignement, …) sur le texte, plusieurs propriétés sont présentes :

• font : police.
• textAlign : alignement.
• Etc.

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");
    
var text = 'Developpeur';      // déclarer texte
context.font = "30pt Arial";   // définir la taille et le font
context.fillStyle = "red";     // couleur du texte
context.fillText(text,25,150); // 25:Coordonnée sur l'abscisse
                               // 150:Coordonnée sur l'ordonnée

Résultat: