canvas ne supporte qu’un type de figure géométrique : le rectangle. Les autres types de figures vont êtes construites en traçant des lignes à partir de coordonnées de points qu’on va donner.
On va pouvoir dessiner deux types de rectangles au sein de notre canevas : des rectangles vides et des rectangles pleins.
Dessiner un rectangle vide
Pour dessiner un rectangle vide, nous allons utiliser la méthode strokeRect() avec notre objet CanvasRenderingContext2D.
On va passer quatre arguments à cette méthode : les deux premiers correspondent respectivement au retrait de notre rectangle par rapport aux bords gauche et supérieur de notre canevas tandis que les deux autres servent à indiquer la largeur et la hauteur de notre rectangle.
Attention à ne pas préciser d’unités avec les arguments de strokeRect() : en effet, la plupart des longueurs sont automatiquement converties en équivalent pixel par le canevas lui-même et on ne précisera donc jamais d’unité pour éviter de dessiner des figures qui vont être déformées.
En utilisant strokeRect(), seul le contour du rectangle sera dessiné. Ce contour sera dessiné en utilisant la valeur de la propriété strokeStyle qui appartient également à CanvasRenderingContext2D.
La propriété strokeStyle peut prendre une couleur, un dégradé ou un motif.
Pour dessiner un rectangle vide dans notre canevas, on va donc déjà commencer par fournir une valeur à la propriété strokeStyle puis on utilisera la méthode strokeRect() pour définir l’emplacement et la taille de notre rectangle vide comme ceci.
Attention ici : si on exécute la méthode strokeRect() avant d’avoir passé une valeur à strokeStyle, cette valeur ne pourra pas être utilisée pour dessiner les contours de notre rectangle vide.
See the Pen
Cours JavaScript 15.2.1 by Pierre (@pierregiraud)
on CodePen.
Dessiner un rectangle plein
Pour dessiner un rectangle plein dans notre canevas, on va plutôt utiliser la méthode fillRect() de l’interface CanvasRenderingContext2D.
Cette méthode s’utilise exactement de la même façon que strokeRect() et prend donc également 4 arguments correspondent au retrait de notre rectangle par rapport aux bords gauche et supérieur de notre canevas et servent à indiquer la largeur et la hauteur de notre rectangle.
Une nouvelle fois, on ne précisera pas d’unités lorsqu’on passe des arguments à fillRect().
La méthode fillRect() va nous permettre de dessiner un rectangle plein. Le remplissage du rectangle va se faire à partir de la valeur de la propriété fillStyle cette fois-ci.
La propriété fillStyle, tout comme strokeStyle, peut prendre une couleur, un dégradé ou un motif qui va ensuite être utilisé pour remplir les figures du canevas.
On va donc à nouveau devoir commencer par fournir une valeur à fillStyle puis utiliser ensuite fillRect()pour dessiner un rectangle plein dans le canevas.
See the Pen
Cours JavaScript 15.2.2 by Pierre (@pierregiraud)
on CodePen.
Dessiner plusieurs rectangles dans le canevas
On va tout à fait pouvoir dessiner plusieurs figures à la suite dans un canevas et notamment dessiner plusieurs rectangles. La dernière figure créée sera au-dessus (visuellement) de la précédente et etc.
Si on souhaite dessiner plusieurs figures pleines ou plusieurs figures vides avec des styles différents, il faudra bien penser à modifier la valeur des propriétés strokeStyle et fillStyle afin d’obtenir les styles souhaités.
See the Pen
Cours JavaScript 15.2.3 by Pierre (@pierregiraud)
on CodePen.
Effacer une zone rectangulaire dans le canevas
On va également pouvoir effacer une zone rectangulaire dans notre élément canvas en utilisant cette fois-ci la méthode clearRect().
Cette méthode va prendre 4 arguments qui vont correspondre aux mêmes données que les méthodes précédentes et va tout simplement effacer les dessins dans la zone précisée.
See the Pen
Cours JavaScript 15.2.4 by Pierre (@pierregiraud)
on CodePen.
