Tutoriel Canvas - sommaire

Canvas : dessiner des rectangles

Dans ce chapitre je vais vous montrer comment définir un ou plusieurs éléments Canvas dans une même page web et comment dessiner dans ces différents canevas.
Créer une ou plusieurs "toiles" dans la page web c'est le travail de HTML5.
Dessiner dans les différents canevas c'est la mission d'un script JS reposant sur les méthodes de l'API Canvas.

Se repérer dans un canevas ?

La balise Canvas crée une zone de dessin (un "canevas" ou "toile") avec un système de coordonnées cartésiennes (x,y).
Attention l'origine du système est le coin supérieur gauche !
La balise Canvas doit comporter les attributs "width & height" et s'ils sont absents la "toile" fait par défaut 300 par 150.

Pour dessiner un rectangle dans un canvas il faut argumenter une méthode de l'API avec 4 arguments :
• les coordonnées x,y du coin supérieur gauche du rectangle
• Largeur et hauteur du rectangle

Les trois canevas ("toiles") de cette page

Premier canevas

Deuxième canevas

Troisième canevas

Notez que le premier canevas a un "background" gris et des coins arrondis.
Que le deuxième canevas est borduré et ombré et que le troisième canevas a pour arrière plan un dégradé linéaire.
Il se peut qu'aucune forme ne se dessine dans le troisième canevas car j'utilise une nouvelle méthode de l'API Canvas qui n'est pas forcément implémentée par le navigateur que vous utilisez.

Le code CSS et HTML correspondant

Tout ce code appelle à quelques commentaires.
La règle "display: block" rend opérante la règle suivante : "margin : 10px auto".
Pour chaque balise CANVAS on précise la taille du canevas sans préciser l'unité (ce sont forcément des pixels) sous forme d'attributs width & height.

La balise canvas fermante est obligatoire. Entre la balise ouvrante et fermante on peut insérer un texte alternatif qui s'affiche si le navigateur n'a pas implémenté l'API Canvas. Par exemple si vous utilisez encore IE8 ou une version antérieure.
Tous les navigateurs récents ont désormais intégré l'API Canvas donc.

Comme toute boite HTML on peut styler l'élément CANVAS avec les propriétés background, border-radius, border, box-shadow, etc.
L'arrière-plan peut être une couleur unie ou un dégradé voire une image.

Le code JavaScript de la page

Le code à l'intérieur du conteneur SCRIPT comprend trois parties : une par canevas.

Code JS pour remplir le premier canevas

...
var canevas = document.querySelector('#canevas1'); 
var contexte = canevas.getContext('2d');
contexte.fillStyle = "rgba(255,0,0,0.5)" ; 
contexte.rect(20,20,100,100); 
contexte.fill();
contexte.rect(40,40,100,100); 
contexte.fill(); 
contexte.fillRect(60,60,100,100); 
contexte.fillRect(80,80,100,100); 
contexte.fillRect(100,100,100,100); 		
contexte.fillRect(120,120,100,100); 	
contexte.fillRect(140,140,100,100); 	
contexte.fillRect(160,160,100,100); 	
contexte.fillRect(180,180,100,100); 	

Si ce script est interne à la page il doit être bien sûr, contenu dans la balise SCRIPT !

Avant de commencer à dessiner il faut :
• cibler un des canevas de la page : var canvas = document.querySelector('#canevas1')
• préciser le contexte (2D ou 3D) :var contexte = canvas.getContext('2d')

Pour cibler dans le script un élément du DOM j'utilise la méthode querySelector("#Id") qui équivaut à getElementByID('id').
L'API Canvas n'autorise que le dessin 2D d'où la méthode getContext('2d') qui retourne un objet graphique de type 2d.

On définit ensuite la couleur de remplissage avec la propriété fillStyle. Notez que la couleur est exprimée ici avec la notation RGBA (voir tutoriel CSS3) c'est à dire avec quatre paramètres. Le dernier paramètre correspond au degré de transparence.

J'appelle deux fois la méthode rect(x ,y ,largeur ,hauteur) puis fill() pour dessiner et remplir un rectangle.
Pour les sept autres carrés je remplace rect() & fill() par un raccourci : fillRect().
Ici neuf carrés qui ont tous les mêmes dimensions (100 par 100) mais le coin haut gauche du carré toujours plus éloigné de l'origine.
Il y a donc empilement et décalage des différentes formes.

Code JS pour remplir le deuxième canevas

Plutôt que 9 instructions pour dessiner le contour des neuf carré ; une seule instruction mais intégrée dans une boucle répétée 9 fois !

...
var canevas2 = document.querySelector('#canevas2'); 
var contexte2 = canevas2.getContext('2d');
contexte2.strokeStyle = "red" ; 
contexte2.globalAlpha = 0.2 ; 
contexte2.lineWidth = '5'; 
for (i=1; i<=9; i++)
{
	contexte2.translate(20,20) ; 
	// déplacement origine pour rectangle suivant
	contexte2.rect(0,0,100,100) ; 
	contexte2.stroke();
} // fin for 

Lorsqu'une même page web contient plusieurs "toiles" faites très attention aux noms des variables dans le script.
Pour chaque canevas il faut une variable qui cible le canevas et une autre qui crée un objet graphique 2D pour ce canevas.
Dans cette page, pour remplir le premier canevas j'utilise les variables "canevas & contexte" et pour dessiner dans le deuxième canevas j'utilise les variables globales "canevas2 & contexte2".

Dans ce deuxième canevas on veut colorier uniquement le contour ("stroke") des formes.
Les carrés sont bordurés avec un rouge quasi transparent. Je n'ai pas utilisé la notation RGBA de la couleur mais je combine la couleur "red" avec une transparence de 0.2 (contexte2.globalAlpha =0.2)

Puis une boucle est exécutée 9 fois. Lors de chaque passage dans la boucle il y a un changement d'origine avec la méthode translate(offset x, offset y) ; ensuite on dessine et bordure le rectangle avec les méthodes rect() & stroke(). J'aurais pu simplifier en utilisant une seule méthode : strokeRect().

Code pour remplir le troisième canevas

function remplir()
{	
	var canevas = document.getElementById('canevas3'); 
	var contexte = canevas.getContext('2d');
	var X = canevas.width; 
	var Y = canevas.height;
	console.log(X + " " + typeof(X));
	console.log(Y + " " + typeof(X));
	contexte.fillStyle ="olive";
	contexte.roundRect(10,10,X/2,X/3,[20]); 
	contexte.fill(); 
	contexte.roundRect(X/2,Y/2,100,100,[50]); 
	contexte.fill();
}
remplir() ; //appel remplir

Pour remplir ce troisième canevas, les termes utilisés pour désigner les variables sont les mêmes que pour remplir le premier : canevas & contexte.
Et pourtant il n'y aucune ambiguïté ; en effet ces variables sont déclarées dans une fonction et sont donc locales alors que pour le premier script il s'agissait de variables globales.

Je vous conseille fortement d'utiliser des variables locales ; donc concrètement de les déclarer dans une fonction à raison d'une fonction par canevas.
Ainsi dans chaque fonction, vous pourrez utiliser les mêmes termes pour désigner vos variables locales.

La dernière version de Canvas a introduit une nouvelle méthode : roundRect(). Elle permet de dessiner des rectangles avec des angles arrondis.
Si le rectangle est carré et si le radius est égal à la moitié du côté, il s'affiche alors un rond !
Attention le radius doit être entre crochets !

Les variables locales X & Y contiennent les dimensions du canevas : 400 et 300.
Affichez la console du navigateur pour vérifier mes allégations.
La console vous informe aussi que les données sont de type number ; elles peuvent donc être utilisées directement comme arguments des méthodes.

À propos de la syntaxe

Méthodes et propriétés de l'objet contexte

Les propriétés n'ont pas de parenthèses alors que les méthodes (qui sont des fonctions !) ont une paire de parenthèses :
• la propriété globalAlpha définit la transparence des couleurs du contexte. Par défaut Alfa est réglé à 1 (opacité parfaite)
• la propriété fillStyle précise la couleur de fond ; notation RGBA possible
• la propriété strokeStyle permet de définir la couleur de contour ; notation RGBA possible
• la propriété lineWidth précise l'épaisseur de l'éventuel contour
• La méthode rect(x,y,largeur,hauteur) permet de définir un rectangle ; il faut ensuite le colorier avec les méthodes stroke() & fill()
• la méthode fillRect(x,y,largeur,hauteur) équivaut à rect() & fill()
• la méthode strokeRect(x,y,largeur,hauteur) équivaut à rect() & stroke()
• la méthode translate(offset x, offset y) permet de changer le point d'origine de la zone de dessin
• la méthode roundRect(x,y,largeur,hauteur, radius) dessine un rectangle avec coins arrondis ; il faut ensuite le colorier

Attention à la casse dans l'écriture des propriétés et méthodes ; respectez la règle JavaScript concernant la casse : la première lettre de chaque mot en majuscule mais seulement à partir du deuxième mot : notation camelCase.
Les arguments passés dans les méthodes Canvas peuvent être des expressions (par exemple : X/2, X/4, X*3/4, ...)

La notation des couleurs

Pour exprimer les couleurs on peut utiliser un nom (anglais bien sûr) ou un code hexadécimal ou le code RGB ou mieux encore encore RGBA (pour gérer en même temps la transparence).
La notation RGBA vous dispense d'utiliser la méthode globalAlpha.