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>

Un peu de 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 au sélecteur canvas.

Le code HTML

Pour chaque balise CANVAS on précise la taille du canevas (en pixels) et on attribue à chaque zone de dessin un identifiant.
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 et height de la balise CANVAS ne peuvent être que des pixels !
Vous allez me dire que c'est génant dans le cadre du "responsive web design" ...
Rassurez vous il y a une solution : redéfinir les dimensions du canevas avec le CSS.
Les attributs width et height de la balise CANVAS ne sont pas pour autant inutiles ; ils définissent un système de coordonnées indépendant de la taille effective du canevas, exactement comme le viewBOX pour une zone de dessin SVG.
Mais j'aurais l'occasion de revenir sur cette problèmatique.

Le script

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.

Le script pour dessiner dans le premier canevas

	//première partie du script
		var canvas = document.querySelector('#canevas1'); 
		var contexte = canvas.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); 	

Il est prévu que dans le futur que l'on puisse dessiner en 3D avec Canvas ... mais pour l'instant il n'y a que le contexte 2D.
Je vous rappelle que la méthode querySelector de l'objet document remplace avantageusement l'ancienne méthode getElementById. Voir le tutoriel JS pour avoir plus d'explications sur les nouvelles méthodes en JavaScript de référencement des noeuds du DOM.

On définit d'abord la couleur de remplissage avec la propriété fillStyle. Notez que la couleur est exprimée avec la notation RGBA (voir tutoriel CSS3).
Puis on appelle 9 fois la méthode fillRect(x ,y ,largeur ,hauteur) pour dessiner 9 rectangles pleins.

A la place de contexte.fillStyle = "rgba(255,0,0,0.5)" on aurait pu écrire :
contexte.globalAlpha =0.5; contexte.fillStyle ="red"; . Donc une instruction pour définir la transparence du contexte et une autre instruction pour définir la couleur de remplissage.

Le script pour dessiner dans le deuxième canevas

	//deuxième partie du script
		var canvas = document.querySelector('#canevas2'); 
		var contexte = canvas.getContext('2d');
		contexte.strokeStyle = "rgb(255,0,0)" ; 
		contexte.lineWidth = '5'; 
		for (i=1; i<=9; i++)
		{
			contexte.translate(20,20) ; // déplacement origine pour rectangle suivant
			contexte.rect(0,0,100,100) ; 
			contexte.stroke();
		} // fin for 

On définit d'abord un style et une épaisseur de contour respectivement avec les propriétés strokeStyle et 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) puis on définit un rectangle avec la méthode rect() et on dessine ses contours avec la méthode stroke().

On peut remplacer ces deux instructions par une seule basée sur la méthode strokeRect().

Syntaxe

Dans le code Canvas l'unité de mesure n'est pas précisée ; c'est toujours le pixel !

Exprimer les couleurs de fond et de contour avec la notation RGBA évite de devoir constamment actualiser l'opacité des couleurs du contexte.
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.
Retour menu