Canvas : dessiner des rectangles

Coordonnées

La balise Canvas crée une zone de dessin ; les coordonnées sont définies par un système cartésien qui débute dans le coin supérieur gauche de la zone.
La balise Canvas doit comporter les attributs width & height. S'ils sont absents la zone de dessin fait par défaut 300 pixels par 150.

Exemple

Dans la page j'ai créé deux zones Canvas remplies par des carrés.
Un carré c'est une forme particulière de rectangle ... hauteur = largeur.

Dans le premier canevas on dessine des carrés pleins et dans le deuxième canevas des carrés bordurés (mais pas remplis).

Le code CSS et HTML correspondant

Une règle de style concerne la balise CANVAS afin que chaque boîte CANVAS soit centrée horizontalement dans la page.
La balise canvas n'est pas nativement de type block. Donc il faut appliquer display:block avant d'appliquer margin:auto à l'élément canvas.

Commentaire du HTML

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 de balise : width & height.
La balise fermante est obligatoire.
Entre la balise ouvrante et fermante on peut insérer un texte alternatif qui s'affiche si le navigateur ne supporte pas Canvas. Par exemple si vous utilisez encore IE8 ...

Le code JavaScript de la page

Le script comprend deux parties : La première partie permet de remplir le premier canevas et la deuxième partie permet de remplir le deuxième canevas.

Code JavaScript pour remplir le premier canevas

	//première partie du script
		var canevas = document.querySelector('#canevas1'); 
		var contexte = canevas.getContext('2d');
		contexte.fillStyle = "rgba(255,0,0,0.5)" ; 
		contexte.fillRect(20,20,100,100); 
		contexte.fillRect(40,40,100,100); 
		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); 	

Pour le moment seul le contexte 2D est disponible. Dans l'avenir, il est possible que les navigateurs supportent également la 3d.

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

Puis on appelle 9 fois la méthode fillRect(x ,y ,largeur ,hauteur) pour dessiner 9 rectangles pleins.
Les paramètres x & y correspondent aux coordonnés du coin haut gauche du rectangle.
Le canevas est une grille (ou système de coordonnées) dont l'origine est située en haut à gauche. C'est donc exactement comme une zone de dessin SVG.
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 ; à chaque les cordonnées x / y sont incrémentées de 20.
Il y a donc empilement et décalage.

Code JavaScript pour remplir deuxième canevas

Plutôt que 9 instructions pour dessiner le contour d'un carré ; une seule mais dans une boucle répétée 9 fois !

	//deuxième partie du script
		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.strokeRect(0,0,100,100) ; 
		} // fin for 

On peut avoir plusieurs balises CANVAS dans une même page mais alors faites attention dans le script. Pour chaque canevas il faut une variable objet qui cible le canevas et une autre qui cible le contexte de ce canevas. Donc ici j'utilise pour le premier canevas les variables canevas & contexte tandis que pour le deuxième canevas j'utilise canevas2 & contexte2.

Dans ce deuxième canevas on veut colorier le contour uniquement des formes.
Il faut définir une opacité, la couleur et une épaisseur de contour respectivement avec les propriétés globalAlpha(), strokeStyle(), lineWidth().

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 colorie le contour du rectangle avec la méthode strokeRect().

On aurait pu utiliser deux instructions : rect() puis stroke().

Syntaxe

Pour exprimer les couleurs on peut utiliser un nom (anglais bien sûr) ou un code hexadécimal ou le code RGB ou encore RGBA.

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.

Et comment on fait pour dessiner un losange ???
Retour menu