Du texte dans Canvas de HTML 5

La balise Canvas permet selon la définition du standard l'écriture de texte avec des effets de relief.

Voila à quoi peut ressembler un texte dans Canvas, selon un exemple fourni avec l'outil en ligne Logo Maker (sur ce site):

Texte dans Canvas
Démonstration avec Logo Maker

Il est intéressant de savoir comment se fera l'écriture dans Canvas, tout en sachant qu'on ne peut l'utiliser que partiellement pour l'instant par manque de compatibilité.

Deux méthodes sont définies pour écrire et elles fonctionnent comme les figures géométriques:

strokeText(texte, x, y)
Affiche le contour du texte. La couleur dépend de la méthode strokeStyle.
fillText(texte, x, y)
Affiche un texte plein. La couleur dépend de la méthode fillStyle.

On reviendra plus tard sur cette fonctionnalité, lorsqu'elle sera implémentée sur les navigateurs courants.

Quelques exemples pour tester l'implémentation

Cette page sert à tester l'implémentation des fonctions de texte de Canvas sur un navigateur avec une exemple minimaliste.

Le code n'est pas supporté sur Internet Explorer 8 et versions antérieures. Dans ce cas et sur toutes les versions de navigateurs qui ne reconnaissent pas la balise, c'est son contenu qui est affiché, en l'occurence le message: "Non reconnu!".

Un texte est affiché ci-dessous, avec une balise Canvas:

Non reconnu!

Code HTML:

<canvas id="c1" width="400" height="100">
Non reconnu!
</canvas>

Code JavaScript:

function canvasFun()
{
var canvas = document.getElementById('c1');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.font = "20pt Calibri,Geneva,Arial";
ctx.strokeStyle = "rgb(0,0,0)";
ctx.fillStyle = "rgb(0,20,180)";
ctx.strokeText("Exemple de texte", 10, 20);
ctx.fillText("Autre exemple", 10, 60);
}
}
window.onload=canvasFun;

La taille du texte est donnée par la méthode font.
La première phrase est écrite avec un tracé vide avec la fonction strokeText, la seconde avec un tracé plein ordinaire avec la fonction fillText.

Plus d'informations et outils