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 que les mêmes propriétés permettent d'ombrer textes et formes.

Insérer du texte dans un canevas

Exemple

Le code correspondant

Le canevas fait 300 par 300 ; l'attribut ID n'est pas utilisé.

La fonction 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 CANVAS d'une page.

Ici on utilise plusieurs propriétés de la librairie Canvas.

Chaque mot se répartit horizontalement et verticalement autour de son point de référence car ici textAlign= 'center' et textBaseline= 'middle'

Mise en forme du texte grâce à la propriété font qui fonctionne exactement comme la méga propriété font de CSS.

Propriétés pour l'ombrage du texte :
• shadowColor : couleur de l'ombre
• shadowOffsetX : étendue ombre à droite
• shadowOffsetY : étendue ombre en bas
• shadowBlur : floutage de l'ombre

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

Syntaxe

Les valeurs possibles de la propriété textAlign sont : left / center /right
Les valeurs possible de la propriété textBaseline sont : top / middle / bottom

Rappel CSS

La méga propriété font 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 5 valeurs !

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.
Je dessine donc beaucoup de formes via un script très succinct.

Le code correspondant

Le canevas fait 400 par 400 et l'attribut ID n'est pas utilisé.

La fonction :

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 : un rectangle
    var rectangle1 = new Path2D();
    rectangle1.rect(110, 110, 50, 50);
	// créer un deuxième objet graphique : un cercle
    var cercle1 = new Path2D();
    cercle1.arc(100,35, 25, 0, 2 * Math.PI);
	// créer une troisième forme
	var triangle1 = new Path2D('M200 10 h150  v100 z');
	// dessiner ces objets
    contexte.fill(rectangle1);
    contexte.fill(cercle1);
	contexte.fill(triangle1);
	// redessiner les trois formes après une translation verticale
	contexte.translate(0,150); 
	contexte.fillStyle ="red";
	contexte.fill(rectangle1);
    contexte.fill(cercle1);
	contexte.fill(triangle1);
}
fcanevas2();

Comme l'attribut ID n'a pas été utilisé je suis obligé de sélectionner le deuxième canvas par son rang. Le deuxième élément CANVAS a le rang 1 dans la collection des CANVAS.

Les quatres propriétés shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur 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 (notation en relatif).
Rassurez-vous, il y a tout un chapitre sur le constructeur Path2D() et sur la notation au format SVG des chemins.
Le contructeur Path2D() et la notation SVG des chemins

J'utilise aussi une transformation et plus précisèment une translation. Les transformations sont aussi évoqués dans ce tuto.