Tutoriel Canvas - sommaire

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. Sous Chrome il faut aller dans "paramètres avancés".
Un message apparait (utilisation de NOSCRIPT) 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 vous utilisez un script Canvas pensez à programmer un texte alternatif en cas de blocage du script par le navigateur !

Premier exemple

Thème : dessiner le drapeau de la Suisse ; un drapeau un peu sali ... Votre navigateur ne supporte pas Canvas

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.

Le code correspondant (extraits)

Commentaire du code HTML

Si JavaScript est bloqué par le navigateur alors le message contenu dans la balise NOSCRIPT apparait !
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é 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).
Donc ne pensez surtout pas que la méthode clearRect() remplisse de blanc ... elle efface une couche pour retrouver la couche précédente.
Si vous voulez que la croix dans le fond rouge soit blanche et non pas grise (ce qui serait plus logique, plus suisse), il faut changer la couleur du contexte (blanc) et utiliser deux fois fillRect() (et non pas clearRect()).

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

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.

La procédure :
• 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.

Afficher ce canevas sur un petit écran

Réduisez la largeur de la fenêtre. Le drapeau est alors tronqué.
Notre canevas n'est pas adaptatif !
Rassurez vous, comme les images les canevas peuvent s'adapter à tous les écrans.
Un peu de patience et quelques pages plus loin vous aurez la solution.