Tutoriel Canvas - sommaire

Canvas : produire du texte - ombrer les formes

Dans ce chapitre je montre comment insérer et styler du texte dans un canevas.
Je vous montre également comment ombrer textes et formes.

Insérer du texte dans un canevas

Exemple

Le code correspondant

La balise canvas définit un repère de 300 par 300 ; l'attribut ID est absent ; une règle de style en ligne pour un affichage 'responsive'.
Le code JS :

function fcanevas1()
{                      
	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	var X = canevas.width ; 	
	var Y = canevas.height; 
	contexte.textAlign ='center'; 
	contexte.textBaseline = 'middle'; 
	contexte.font = " bold italic 80px arial" ; 
	contexte.fillStyle = 'gold'; 
	contexte.strokeStyle ='gold'; 
	contexte.lineWidth = 5; 
	contexte.shadowColor = 'grey'; // couleur ombrage
	contexte.shadowOffsetX = 10 ; 
	contexte.shadowOffsetY = 10 ; 
	contexte.shadowBlur = 10 ; 
	contexte.fillText('Hello', X/2, Y/3) ; 
	contexte.strokeText('world',X/2, Y/3*2); 
}
fcanevas1(); 

Comme l'attribut ID n'a pas été utilisé ; je suis obligé de repérer le premier canvas par son rang. La méthode querySelector('canvas') sélectionne la premier élément canvas de la page web.

Chaque mot se répartit horizontalement et verticalement autour de son point de référence car textAlign= 'center' et textBaseline= 'middle'
Les valeurs possibles de la propriété textAlign sont : left / center /right.
Les valeurs possible de la propriété textBaseline sont : top / middle / bottom.

Le texte est stylé grâce au raccourci font qui fonctionne exactement comme ce raccourci du même nom en CSS.
Ce raccourci remplace les propriétés élémentaires suivantes : font-style, font-variant,font-weight, font-size, font-family.
Exemple : font : italic small-caps bold 24pt Arial ;
Remarque : il faut respecter l'ordre mais il n'est pas obligatoire qu'il y ait toujours 5 valeurs.

Propriétés pour l'ombrage du texte :
• shadowColor : couleur de l'ombre
• shadowOffsetX : étendue horizontale de l'ombre
• shadowOffsetY : étendue verticale de l'ombre
• shadowBlur : floutage de l'ombre

Les valeurs de shadowOffsetX & shadowOffsetY peuvent être négatives.

Les méthodes fillText(texte, x,y) et strokeText(texte,x,y) permettent d'écrire le texte :
• fillText : lettres pleines
• strokeText : contours des lettres
• x, y : coordonnées du point de référence

Canvas : ombrage de formes

Les quatres propriétés shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur permettent non seulement d'ombrer le texte mais aussi les formes comme je le montre dans le canevas ci-dessous.

Le canevas

Les six formes géométriques sont ombrées.
Je définis un modèle de rectangle et le duplique deux fois. Même remarque pour le cercle et le triangle.

Le code correspondant

La balise canvas définit un repère de 400 par 400 ; l'attribut ID est absent ; une règle de style en ligne pour un affichage 'responsive'.
Le code JS :

function fcanevas2()
{
	var canevas = document.querySelectorAll('canvas')[1]; 
	var contexte = canevas.getContext('2d');
	contexte.shadowColor = 'grey';
	contexte.shadowOffsetX = 10 ; 
	contexte.shadowOffsetY = 10 ; 
	contexte.shadowBlur = 10 ; 
	// créer un premier objet graphique : rectangle1
    var rectangle1 = new Path2D();
    rectangle1.rect(110, 110, 50, 50);
	// créer un deuxième objet graphique : cercle1
    var cercle1 = new Path2D();
    cercle1.arc(100,35, 25, 0, 2 * Math.PI);
	// créer une troisième objet graphique : triangle1
	var triangle1 = new Path2D('M200 10 h150  v100 z');
	
	// dessiner ces objets
    contexte.fill(rectangle1);
    contexte.fill(cercle1);
	contexte.fill(triangle1);
	// redessiner les trois objets après une translation
	contexte.translate(0,150); 
	contexte.fillStyle ="red";
	contexte.fill(rectangle1);
    contexte.fill(cercle1);
	contexte.fill(triangle1);
}
fcanevas2();

Comme l'attribut ID est absent je suis obligé de sélectionner le deuxième canvas par son rang avec la méthode document.querySelectorAll(sélecteur CSS)[indice].
La deuxième balise canvas a le rang 1 dans la collection de ces éléments.

Les quatre propriétés shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur - applicables au contexe - permettent non seulement d'ombrer du texte mais aussi les formes.

Remarquez que les trois formes géométriques sont définies grâce au constructeur Path2D() et que la dernier chemin est défini avec la syntaxe SVG.
Je n'en dis pas plus pour l'instant ... Pour en savoir davantage

Pour ombrer les formes vous pouvez aussi utiliser un filtre avec la fonction drop-shadow(). Canvas - les filtres