Introduction à Canvas

Tracer du texte sur un canvas serait extrêmement fastidieux sans les fonctions spécifiques de texte (imaginez, segment par segment, lettre par lettre). Heureusement, deux méthodes simples sont présentes pour dessiner des caractères :

• fillText('Hello Kiwi!', coordx, coordy) produira des lettres pleines (dont la couleur sera celle de fillStyle)
• strokeText('Hello Kiwi!', coordx, coordy)produira uniquement le contour des lettres (dont la couleur sera celle définie au préalable par strokeStyle).

Une méthode complémentaire permet de mesurer à l'avance l'espace occupé par un texte en pixels : measureText('Hello Kiwi!'). Cette fonctionnalité sera bien pratique pour éviter que le texte n'apparaisse pas entièrement quand la fenêtre ou quand l'écran n'a pas forcément la résolution attendue.

Plusieurs propriétés du contexte définissent le style du texte :

• font : police, avec une syntaxe semblable à celle rencontrée en CSS
• textAlign : alignement horizontal
• baseline : ligne de base (alignement vertical)

var text = 'Hello kiwi!';
ctx.font = "30pt Verdana";
ctx.textAlign = "left";
ctx.textBaseline = "top";
var textPxLength = ctx.measureText(text);
ctx.fillStyle = "darkgreen";
ctx.fillText(text,25,50);
ctx.fillStyle = "darkorange";
ctx.fillText("width: "+Math.round(textPxLength.width)+"px",25,100);

Démonstration