Canvas : effacement partiel de formes

Dans cette page j'évoque entre autres, la méthode clearRect() de la bibliothèque Canvas mais je vais vous montrer aussi l'intérêt de prévoir dans la partie HEAD la balise NOSCRIPT.
Avant un second appel de la page, désactivez javaScript.
Un message apparait et les boites Canvas sont alors vides. Ce qui est logique puisque les scripts Canvas ne sont plus interprétés.
Donc dès que votre page web contient un script, pensez à utiliser le conteneur NOSCRIPT pour afficher un message qui signale éventuellement que ce dernier n'a pu être exécuté. ... <head> ... <noscript> <p><b>Les zones de dessin de cette page restent vides car JavaScript est désactivé par votre navigateur ! </b></p> </noscript> ... </head> <body> ...

Premier exemple

Thème : dessiner le drapeau de la Suisse ; un drapeau un peu sali ...

J'aborde dans cette page la fonction clearRect(x,y,largeur,hauteur) qui permet d'effacer une partie de la zone de dessin d'un remplissage précédent.
La croix du drapeau n'est pas blanche mais gris sale ; ce qui un comble pour un pays réputé pour sa propreté.

Le code correspondant (extraits)

...
<canvas width = '400' height = '400' 
		style ="background :lightgrey" >Votre navigateur ne supporte pas Canvas</canvas>
...
<script>
	var canevas = document.querySelector('canvas'); 
	var contexte = canevas.getContext('2d');
	contexte.fillStyle = 'red'; 
	contexte.fillRect(100,100,200,200) ;
	contexte.clearRect(130,180,140,40);
	contexte.clearRect(180,130,40,140);
</script>
...

Commentaire du code HTML

La zone de dessin Canvas fait 400 par 400.
Il s'agit d'une élément HTML de la page donc on peut lui appliquer la propriété CSS background.

Commentaire du script

Il faut d'abord créer un carré (200 de côté) centré dans la zone de dessin et rempli de rouge.
Puis il faut effacer une partie du rouge avec deux rectangles d'effacement : méthode clearRect(x,y,largeur, hauteur). Donc ces deux zones retrouvent un fond "gris clair" ... (couleur de fond de la balise Canvas).
La méthode clearRect() ne remplit pas de blanc mais efface partiellement la couche rouge pour retrouver la couche en dessus : gris clair.
Si vous voulez que la croix du drapeau soit blanche, il suffit de supprimer "background : lightgrey" dans l'instruction HTML.

Un peu de méthode

Mais comment déterminer les coordonnées de l'arête supérieure gauche de chaque rectangle d'effacement ?
Si vous voulez être productif (coder vite et bien) je vous conseille de faire un croquis (sur une feuille de papier millimétrée ou une feuille à petit carreaux) avant de coder proprement dit. Vous éviterez maints tâtonnements ...

La zone de dessin fait 400 par 400. Si vous utilisez une feuille avec des petits carreaux (de 5mm par 5mm), décidez alors d'une échelle. Je vous propose qu'un carreau représente 10px par 10px. Donc un 1/2 cm = 10px ou 1cm = 20px. Vous avez donc une échelle 1/20 (1cm pour 20px). C'est l'échelle que j'ai utilisé dans le croquis ci-dessous.
La boite Canvas (400 par 400) fait donc dans notre croquis 40 carreaux (20cm) de côté.
Ensuite vous dessinez le carré rouge (200px ou 10cm de côté) et les rectangles d'effacement. Le graphique vous indique directement les valeurs x et y du carré et de chaque rectangle. Quant à la détermination des "width" et "height" en pixels, il suffit de multiplier par 20 la cote en centimètres donnée par le croquis ... canvas croquis

Un deuxième exemple plus complexe

Nous allons maintenant dessiner le drapeau norvégien !
Le canevas fait 640 par 460 et le drapeau occupe toute la zone de dessin.

il faut remplir toute la zone de rouge
puis il faut effacer (remplir en blanc) avec deux rectangles (un qui a pour largeur celle du canevas ; un autre qui a pour hauteur celle du canevas par 100)
il faut ensuite dessiner deux rectangles bleus (un qui a pour largeur celle du canevas ; un autre qui a pour hauteur celle du canevas par 60)

Ci-dessous un extrait du code : ... <canvas width = '640' height = '460' ></canvas> <script> // drapeau norvegien dans deuxième canevas var canevas2 = document.querySelectorAll("canvas")[1]; var contexte2 = canevas2.getContext('2d'); var X2 = canevas2.width; var Y2 = canevas2.height; console.log("largeur du 2ième canevas " + X2); console.log("hauteur du 2ième canevas " + Y2); // fond rouge contexte2.fillStyle = "red" ; contexte2.fillRect(0,0,X2,Y2); // zones blanches contexte2.clearRect(160,0,100,Y2); contexte2.clearRect(0,160,X2,100); // zones bleues contexte2.fillStyle ="navy"; contexte2.fillRect(180,0,60,Y2); contexte2.fillRect(0,180,X2,60); ...

La variable canevas2 référence le deuxième élément CANVAS de la page (indice 1 ; le premier élément à l'indice 0).
Je récupère dans les variables X et Y respectivement la largeur (640) et la hauteur (460) de ce deuxième canevas.
Je peux utiliser ces valeurs pour argumenter les fonctions fillRect(), clearRect(), etc.

Les instructions basées sur la fonction "alert" sont provisoires mais elles montrent qu'il est facile de récupérer les dimensions d'un canevas pour ensuite utiliser celles-ci dans le code.

Traduction

Tutoriel Canvas - sommaire

Dessiner avec Canvas

Animations et jeux avec Canvas

Tutoriel Canvas - recherche

L'auteur : Patrick Darcheville