Du texte dans Canvas de HTML 5

La balise Canvas permet l'écriture de texte avec un effet de relief et remplissage par un motif.

Voici par exemple à quoi peut ressembler un texte dans Canvas, selon un exemple généré avec l'outil en ligne Logo Maker, qui est fourni sur ce site:

Texte dans Canvas
Démonstration avec Logo Maker

Deux méthodes sont définies pour écrire un texte dans cette zone graphique 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.

Quelques exemples pour tester l'implémentation

Deux textes sont affichés ci-dessous, dans une balise Canvas grâce au code JavaScript suivant:

Non reconnu!

Code HTML:

<canvas id="c1" width="400" height="100">
</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 uni avec la fonction fillText.

Outils

SVG Text, démonstrations