Dessiner des rectangles avec Canvas

Ce sont en fait des carrés ! Mais 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 contours de carrés.

Le code CSS et HTML

... <style> canvas {display : block ; margin : 5px auto 5px auto ; border : 1px solid black ; } </style> </head> <body> ... <canvas width = '300' height = '300' id ='canevas1'></canvas> <canvas width = '300' height = '300' id ='canevas2'></canvas>

Commentaire du CSS

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/h3>

Pour chaque balise CANVAS on précise la taille du canevas sans préciser l'unité sous forme d'attributs de balise : width & height.
La balise fermante est obligatoire même si il n'y a rien entre la balise ouvrante et la fermante.

Attention les valeurs des attributs width & height de la balise CANVAS ne peuvent être exprimés en pourcentage du genre width = "80%" mais obligatoirement sous forme d'un entier.
Vous allez me dire que c'est gênant dans le cadre du "responsive web design". Rassurez vous il y a une solution. Mais j'aime entretenir le suspense donc je n'en dis pas plus pour l'instant ...

Le code JS 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 JS 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 JS 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