Aujourd’hui nous allons voir comment ajouter du texte aux nouveaux éléments <canvas> du HTML5.

Comme les plus attentifs d’entre-vous l’auront déjà remarqué, le titre de l’article révèle déjà une partie du contenu de l’article ; effectivement, pour utiliser les canvas, il faut obligatoirement passer par JavaScript.

Le HTML

La déclaration d’un canvas est on ne peut plus simple:

<canvas id="canvas" width="500" height="250"></canvas>

Le Javascript

Pour toute action sur un canvas, il faut sélectionner son canvas, via son id, puis il faut sélectionner son contexte. Toutes les actions suivantes se feront via ce contexte.

//On sélectionne notre élément
var c = document.getElementById('canvas');
//On sélectionne notre contexte
var ctx = c.getContext('2d');

Note: à la manière du $(document).ready() de jQuery, notre code JS doit être placé dans une fonction exécutée au window.onload.

Bon, maintenant passons aux choses sérieuses: comment ajoute t-on du texte à notre canvas ; cela s’effectue simplement en utilisant la méthode fillText() sur notre canvas, tout en ayant auparavant choisis la police, la taille, l’alignement, ainsi que le remplissage de notre texte (pour l’instant une simple couleur).

//On règle la police et la taille du texte
ctx.font = '85px Impact';
//On règle l'alignement de notre texte
ctx.textAlign = 'center';
//On règle la couleur de remplissage
ctx.fillStyle = '#000';
//Et voilà le moment tant attendu, l'utilisation de drawText(*notre texte*,x,y)
ctx.fillText('Test',0,0);

Si vous essayez ce code – et je suis sûr que vous allez le faire ;-) – vous ne voyez rien… Rassurez-vous, cela n’est pas un bug. En effet, si dans le canvas les coordonnées se calculent bien à partir du coin supérieur gauche, le point de repère d’un élement texte est le coin inférieur gauche.

Voici un code correct:

ctx.font = '85px Impact';
ctx.textAlign = 'center';
ctx.fillStyle = '#000';
ctx.fillText('Summer',250,100);
ctx.fillText('is magic',250,180);

Le code ci-dessus nous donne le résultat suivant:

Maintenant, je t’entend dire (oui, toi, lecteur) « Oui, mais les polices système c’est dépassé, l’avenir c’est les web-fonts ». Ne désespère pas jeune codeur, il est possible d’utiliser ces polices avec les canvas, mais la méthode à utiliser est assez étrange.

En effet, on pense que l’appel à notre police

<link href="https://fonts.googleapis.com/css?family=Knewave" rel="stylesheet" type="text/css">

et son attribution à notre texte

ctx.font = '85px Knewave';

suffisent, mais il n’en est rien. En effet, il faut d’abord que notre police ai été attribuée à au moins un élément de notre document:

body {
    font-family:Knewave;
}

Notre police provenant d’un autre serveur, avant toute action sur le canvas, il faut s’assurer qu’elle soit chargée. Pour cela, rien de bien compliqué, un simple setTimeout suffit.

Notre code devient donc:

setTimeout(function(){
	var c = document.getElementById('canvas');
	var ctx = c.getContext('2d');
	ctx.font = '85px Knewave';
	ctx.textAlign = 'center';
	ctx.fillStyle = '#000';
	ctx.fillText('Summer',250,100);
	ctx.fillText('is magic',250,180);
},1000);

Et nous donne le résultat suivant:

Conclusion

Et oui, nous voilà déjà rendus à la fin de ce tutoriel. Nous verrons dans un (ou plusieurs) autre(s) article(s) les autres modes de remplissage possibles avec les canvas.

Bonus

Il est également possible de rajouter des ombres à notre texte, et ce très simplement : c’est un réglage de notre contexte:

setTimeout(function(){
	var c = document.getElementById('canvas');
	var ctx = c.getContext('2d');
	ctx.font = '85px Knewave';
	ctx.textAlign = 'center';
	ctx.fillStyle = '#000';
	ctx.shadowColor = '#000'; //Couleur de notre ombre
	ctx.shadowBlur = 20; //Rayon de floutage
	ctx.fillText('Summer',250,100);
	ctx.fillText('is magic',250,180);
},1000);

Nous obtenons alors ce résultat:

Note: à cause d’un bug connu, il est possible que sous Chrome l’ombre n’apparaisse pas de manière optimale (ou pas du tout).