Les zones de dessin de cette page restent vides car JavaScript est désactivé par votre navigateur !

Canvas : la fonction clearRect()

Après un premier affichage, bloquez JavaScript !
Sous Chrome il faut aller dans "paramètres avancés".
Un message apparait (utilisation de NOSCRIPT) mais les canevas disparaissent ...

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. Donc cette zone retrouve la couleur du remplissage précédent. Dans l'exemple : gris clair.

Le code correspondant

... <noscript> <p><b>Les zones de dessin de cette page ne s'affichent pas car JavaScript est bloqué par votre navigateur ! </b></p> </noscript> </head> ... <canvas width = '400' height = '400' style ="background :lightgrey" ></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> </body></html>

Commentaire du code

HTML :
Si JavaScript est bloqué par le navigateur alors le message contenu dans la balise

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

Le 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 tatônnements ...

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 !

Je ne vous donne pas tout le code. Mais je vous aide !
Le canevas fait 640 par 460 et le drapeau occupe toute la zone de dessin.

Ci-dessous un extrait du code :

... <canvas width = '640' height = '460' ></canvas> <script> var canevas2 = document.querySelectorAll("canvas")[1]; var contexte2 = canevas2.getContext('2d'); var X2 = canevas2.width; var Y2 = canevas2.height; ...

Je récupère dans les variables X et Y respectivement la largeur et la hauteur du canevas.
Je peux utiliser ces valeurs pour argumenter les fonctions fillRect(), clearRect(), etc.

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