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.
Définir la ou les canevas, c'est le travail de HTML5.
Dessiner dans chaque canevas, c'est le travail 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". S'ils sont absents la zone de dessin fait par défaut 300 pixels par 150.

Donc et par par exemple, 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

Ces arguments sont exprimés en pixels.

Les trois canevas 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

Tout ce code appelle à quelques commentaires.
La balise Canvas n'est pas nativement de type block d'où la règle "display: block" qui 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 ignore l'élément HTML. Par exemple si vous utilisez encore IE8 ou une version antérieure.
Tous les navigateurs récents ont désormais implémenté l'API Canvas donc je n'écris rien entre les balises début et fin.

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 script comprend trois parties : une pour chaque canevas.

Script pour remplir le premier canevas

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 le canevas par une variable : var canvas = document.querySelector('#canevas1')
• préciser le contexte (2D ou 3D) avec une autre variable :var contexte = canvas.getContext('2d')

Pour cibler dans le script un élément du DOM j'utilise la méthode querySelector("#Id") qui remplace avantageusement 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.

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.
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 des différentes formes.

Le cript pour remplir le deuxième canevas

Plutôt que 9 instructions pour dessiner le contour des neuf carré ; une seule instruction mais 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.strokeRect(0,0,100,100) ; } // fin for

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

Nous verrons qu'il existe une autre solution plus orthodoxe : inclure le code relatif à chaque canevas dans une fonction. On peut donc utiliser les mêmes termes pour designer les variables puisqu'elles sont locales.

Dans ce deuxième canevas on veut colorier uniquement le contour ("stroke") 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().

Le cript pour remplir le troisième canevas

Pour ce troisième canevas, le contexte 2D est désigné par la variable ctx comme il est souvent d'usage ...
Notez l'emploi d'un dégradé linéaire en guise d'arrière plan de l'élément HTML canvas.
Dans la méthode roundRect() le cinquième argument (le radius) doit être entre crochets.

La dernière version de Canvas a introduit entre autres la méthode roundRect() qui permet de dessiner des rectangles et carrés avec des angles arrondis voire des ronds.

Un peu de syntaxe

Dans les exemples précédents nous avons utilisé différentes méthodes. Voyons leur syntaxe.

Méthodes et propriétés de l'API Canvas

Les propriétés n'ont pas de parenthèses alors que les méthodes ont une paire de parenthèses :
• la propriété globalAlpha définit la transparence (ou opacité) des couleurs du contexte. Elle est inutile si les couleurs sont exprimées avec la notation RGBA. Par défaut Alfa est réglé à 1 (opacité totale)
• 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 peuvent être des variables !

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 encore RGBA (pour gérer en même temps la transparence).