Canvas : constructeur Path2D

Remarquez que jusqu'à maintenant les méthodes fill() & stroke() n'avaient pas d'argument. Et bien ça va changer ...

La dernière version de l'API Canvas introduit un constructeur d'objets : Path2D().
Grâce à ce constructeur, il suffit de définir un modèle de forme (position et dimensions) et de lui affecter un nom.
Ensuite vous pouvez dupliquer N fois ce modèle.

Autre bonne nouvelle : cette méthode peut avoir comme argument la notation SVG des chemins (en absolu ou en relatif).
Donc il suffit désormais d'une seule instruction pour définir une forme complexe.

Premier exemple

Commentaire

Grâce au constructeurs d'objets Path2D() on définit deux formes graphiques (un rectangle et un cercle) référencées respectivement par les variables rectangle1, cercle1.
Ces formes sont dessinées quatre fois.

Dès que le modèle d'objet est défini, une seule instruction suffit pour dessiner (en contour et/ou en plein) le modèle. Utilisez une translation dans le repère cartésien pour cloner à des emplacements différents.

Le script

var canevas = document.querySelector('canvas'); 
var contexte = canevas.getContext('2d');
X = canevas.width ;
Y = canevas.height;
contexte.lineWidth = 3; 
// créer un premier modèle : un rectangle
var rectangle1 = new Path2D();
rectangle1.rect(0, 0, X/4, Y/4);
// créer un deuxième modèle : un cercle
var cercle1 = new Path2D();
cercle1.arc(X/4,Y/4, Y/8, 0, 2 * Math.PI);

// dessiner ces modèles en noir (couleur par défaut)
contexte.fill(rectangle1);
contexte.fill(cercle1);

//dessiner ces modèle en rouge après translation 
contexte.translate(X/6,Y/6); 
contexte.fillStyle ="red"; 
contexte.fill(rectangle1);
contexte.fill(cercle1);

// dessiner ces modèle en violet après translation
contexte.translate(X/6,Y/6); 
contexte.strokeStyle ="purple"; 
contexte.stroke(rectangle1);
contexte.stroke(cercle1);

// dessiner ces modèles en orange après translation
contexte.translate(X/6,Y/6); 
contexte.fillStyle ="orange"; 
contexte.fill(rectangle1);
contexte.fill(cercle1);

Le script est succinct alors qu'on dessine huit formes ...
Attention, c'est un constructeur donc n'oubliez pas le mot clé "new" !
Notez que les modèles de formes sont ici définis par rapport aux dimensions du canevas.

Dès qu'un type de forme est appelé à être dessiné plusieurs fois dans le canevas, il faut utiliser le constructeur Path2D().

Formes définies avec la syntaxe SVG

Comme je le disais en préambule de ce chapitre, le construction Path2D autorise la notation SVG des chemins.
Donc là où il zurait fallu une instruction lineTo() et des dizaines d'instructions moveTo() il n'y aura plus qu'une instruction Path2D(chemin exprimé avec la notation SVG).

Exemple

Dans le deuxième canevas ci-dessus il y a quatre formes colorées en noir.
Cliquez dans le canevas pour que les formes deviennent orangées.

Le script correspondant

var canevas2 = document.querySelectorAll('canvas')[1]; // sélection deuxième canevas
var contexte2 = canevas2.getContext('2d');
X2 = canevas2.width ; 	Y2 = canevas2.height;
		
var triangle2 = new Path2D('M10 10 L200 100 L200 200 Z');
contexte2.fill(triangle2);
		
var rectangle2 = new Path2D( "M250 150 H400 V200 H250 Z");
contexte2.fill(rectangle2);
		
var toit_usine2 = new Path2D('M10 250 l20 -20 l20 20 l20 -20 l20 20 l 20 -20 
		l 20 20 l 20 -20 l20 20');
contexte2.stroke(toit_usine2);
		
var carre2 = new Path2D('M10 300 h 80 v 80 h -80 z');
contexte2.fill(carre2);
	
var couleur2 = "orange"; 
canevas2.onclick = function()
{ 
	contexte2.fillStyle =couleur2;
	contexte2.strokeStyle =couleur2;
	contexte2.clearRect(0,0,X,Y);
	contexte2.fill(triangle2);
	contexte2.fill(rectangle2);
	contexte2.stroke(toit_usine2);
	contexte2.fill(carre2);
}

Notez que le script est très succinct grâce à l'emploi du constructeur Path2D et de la syntaxe SVG.
Chaque modèle Path2D est défini avec une seule instruction !

Les deux premiers chemins sont notés en absolu : les lettres L,H,V sont en majuscules.
Les deux derniers chemins sont notés en relatif : les lettres l,h,v sont en minuscules.

Si vous ne comprenez rien à cette syntaxe concernant les chemins SVG, suivez le lien : La balise PATH de SVG - notation en absolu et en relatif d'un chemin

Restrictions

Attention dans la notation d'un trajet selon la syntaxe SVG, les abscisses et ordonnées ne peuvent être des variables !

Pourquoi utiliser le constructeur Path2D et la notation SVG des chemins ?

Je vais maintenant vous montrer que dans certains cas, le recours au constructeur Path2D() et à la notation SVG du chemin est incontournable.
Thématique : pour commémorer l'appel du 18 juin, nous devons réaliser une belle croix de Lorraine ombrée (ombre portée vers le coin supérieur gauche).

Solution 1

Une croix de lorraine c'est 3 rectangles qui se croisent.
Ci-dessous le rendu :

C'est très moche car chaque rectangle est ombré. Ce n'est pas le rendu souhaité.

Bonne solution

Il faut créer un chemin constitué de lignes horizontales et verticales.

Cette fois c'est beaucoup plus joli car il n'y a plus qu'une forme : un chemin défini avec la syntaxe SVG et plus précisèment selon la notation relative ; notation qui est intuitive si vous partez d'un schéma (établi sur une feuille à petits carreaux).

Le code correspondant : HTML & CSS : <canvas width ="400" height ="400" style ="width : 80%; height : auto; background : linear-gradient(to bottom, skyblue ,white) ;"> </canvas> SCRIPT : ... contexte.fillStyle ="white"; contexte.shadowColor = 'grey'; contexte.shadowOffsetX = -10 ; contexte.shadowOffsetY = -10 ; contexte.shadowBlur = 5 ; var croix = new Path2D('M170,50 h60 v50 h60 v60 h-60 v90 h110 v60 h-110 v90 h-60 v-90 h-110 v-60 h110 v-90 h-60 v-60 h60 v-50 z'); contexte.fill(croix); ...

La balise canvas ést un élément HTML auquel on peut appliquer un dégradé CSS.

Le chemin est noté en relatif en indiquant la longueur des droites horizontales ou verticales.
Pour définir ce chemin je me suis aidé d'un croquis réalisé sur une feuille "petits carreaux" avec l'échelle : 10 carreaux pour 100 pixels.
J'ai centré horizontalement la croix de Lorraine. Par lecture directe sur le croquis j'obtiens toutes les infos pour décrire le chemin : point de départ, caractéristiques de chaque segment : horizontal/vertical, longeur , sens (+ ou -).

Atelier

Essayez de reconstituer le code correspondant à cette belle balustrade classique.

Pour vous aider je vous donne quelques bribes du script. ... var colonne = new Path2D("M 0,20 h120 v30 h-20 c-30,60 50,140 0,200 h20 v40 h-120 v-40 h20 c-50,-60 30,-140 0,-200 h-20 v-30 z"); contexte3.fillStyle = ... for (i=0; i<=7; i++) { ... // dessin d'une colonne ... // déplacement de 120px sur l'axe X } // fin for ...

Le canevas fait 900 par 300 avec un background "azur".
Une colonne fait 120 de large. Le chemin est complexe : des courbes de Bézier.
Pour dessiner la balustrade il faut dupliquer 8 fois le modèle "colonne" avec translation.

Traduction

Tutoriel Canvas - sommaire

Dessiner avec Canvas

Animations et jeux avec Canvas

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville