Accueil

Traduction

Tutoriel Canvas - sommaire

Dessiner avec Canvas

À propos de Canvas Les rectangles Canevas 'responsive' - effacement partiel Les cercles, ellipses et arcs Les lignes et polygones Insérer du texte - ombrage Courbes quadratiques et courbes de Bézier Le constructeur Path2D() - notation SVG des chemins Insertion d'images Filtres, dégradés & motifs Transformations : translate(), scale(), rotate() Masques et compositions

Animations et jeux avec Canvas

Animation de courbes de Bézier et d'ellipses Animations - recours à la POO Des animations plus complexes et des jeux

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Canvas : dessiner des rectangles

Dans ce chapitre je vais vous montrer comment définir un ou plusieurs éléments canvas dans une 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 de JavaScript incluant des propriétés et méthodes de la librairie 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.
Attention l'origine du système est le coin supérieur gauche !
Une balise canvas doit donc comporter les attributs width & height pour définir ce repère cartésien ; si vous oubliez ces attributs le repère cartésien fera alors 300px par 150px

Les quatre canevas ("toiles") de cette page

Premier canevas

Deuxième canevas

Troisième canevas

Quatrième canevas

Cliquez dans la 'toile' ci-dessus pour qu'elle se remplisse.

Le code correspondant

Canvas est un élément HTML donc on peut lui appliquer des propriétés CSS telles que background, border-radius, box-shadow pour le styliser.
Notez que chaque élément canvas a l'attribut id ; c'est très important pour associer une routine JS à chaque élément.

Le code JavaScript de la page

Le code à l'intérieur du conteneur SCRIPT comprend quatre parties : une pour chaque canevas.

Code JS pour remplir le premier canevas

Des carrés remplis de rouge à demi opaque. 

	var canevas1 = document.querySelector('#canevas1'); 
	var contexte1 = canevas1.getContext('2d');
	contexte1.fillStyle = "rgba(255,0,0,0.5)" ; // rouge à demi opaque
	contexte1.rect(20,20,100,100); 
	contexte1.fill();
	contexte1.rect(40,40,100,100); 
	contexte1.fill(); 
	contexte1.fillRect(80,80,100,100); 
	contexte1.fillRect(100,100,100,100); 		
	contexte1.fillRect(120,120,100,100); 	
	contexte1.fillRect(140,140,100,100); 	
	contexte1.fillRect(160,160,100,100); 	
	contexte1.fillRect(180,180,100,100);

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

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 les méthodes rect() & fill() par un raccourci : la méthode 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

Neuf carrés avec un large contour rouge quasi transparent. 

...
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

Notez la boucle répétée 9 fois.
À chaque passage dans la boucle, il y a une translation du point d'origine du repère cartésien.
Vous voyez qu'il faut de bonnes notions de JavaScript pour aborder sereinement l'API Canvas.

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 rouge 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().

Remarque concernant le code JS ci-dessus

J'utilise des variables globales. Ce qui m'oblige à utiliser des noms différents pour distinguer les deux toiles et les deux contextes : canevas1, contexte1, canevas2, contexte2.
Cette façon de programmer est volontairement très maladroite ; je vous montre ce qu'il ne faut éviter.

Code JS pour remplir le troisième canevas

Un rectangle aux coins arrondis et un rond.

Lisez très attentivement ce script car il y a beaucoup de nouveautés. 

function remplir()
{	
	var canevas = document.getElementById('canevas3'); 
	var contexte = canevas.getContext('2d');
	var X = canevas.width; // retourne 400
	var Y = canevas.height; // retourne 400
	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 automatique de la fonction

Cette fois je crée une fonction nommée "remplir()" dans laquelle j'initialise quatre variable canevas, contexte, X, Y . Donc ces variables sont locales.

Les paramètres des méthodes peuvent être des constantes entières ou des variables.
Dans le script certains arguments sont exprimés par rapport à X ou Y.

Je vous conseille fortement de créer une fonction par canevas. Ainsi vous pourrez utiliser dans chacune les mêmes termes pour désigner la zone de dessin, contexte, les dimensions du canevas et ce sans risque d'ambiguïté puisque ces variables seront locales.
Par ailleurs vous pourrez contrôler l'appel de ladite fonction comme je le montre dans le quatrième canevas.

La méthode roundRect()

Je dessine un rectangle aux coins arrondis et un rond avec la méthode roundRect(x,y,w,h,[radius]).
Si le rectangle est carré et si le radius est égal à la moitié du côté, cette méthode affiche alors un rond.

Affichez la console du navigateur

Certaines infos s'affichent dans la console du navigateur : console.log()
Affichez la console du navigateur pour lire ces infos fort utiles.

Le code JS pour remplir le quatrième canevas

Une 'toile' d'abord vide puis deux rectangles avec des coins plus ou moins arrondis. 

// appel de la fonction anonyme sur clic dans le canevas
document.getElementById('canevas4').onclick = function()
{
	var canevas = document.getElementById('canevas4'); 
	var ctx = canevas.getContext('2d');
	var X = canevas.width; 
	var Y = canevas.height;
	ctx.strokeStyle = "magenta";
	ctx.strokeWidth =2; 
	
	ctx.roundRect(100,100, X/2, Y/4, [10, 20,30,40]);
	ctx.stroke();
	
	ctx.roundRect(200,200,X/2,Y/4, [40, 30,20,10]);
	ctx.stroke();
}

Pour appeler cette fonction anonyme (donc remplir le canevas) il faut cliquer dans le canevas.
L'objet de type contexte se nomme ici "ctx" (usage très répandu).
Je vous montre que le cinquième argument de la méthode roundRect() peut être une suite de 4 entiers pour définir quatre coins différents.

À propos de la syntaxe Canvas

Méthodes et propriétés de l'objet de type 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 ; c'est la notation camelCase.
Les arguments passés dans les méthodes de la librairie 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) et donc vous dispenser d'utliser globalAlpha.