Canvas : la fonction clearRect()

Thème : dessiner le drapeau de la Suisse.

Votre navigateur est obsolète

Le code la page (extraits)

... <style> canvas {display : block ; margin : 5px auto 5px auto ; border : 1px solid black ; } </style> </head> <body> <canvas width = '400' height = '400'> <p>Votre navigateur est obsolète</p></canvas> ... <script> var canvas = document.querySelector('canvas'); var contexte = canvas.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

Il faut d'abord créer un carré (200 pixels de côté) avec un fond rouge et centré dans la zone de dessin.
Puis il faut effacer une partie du rouge avec deux rectangles d'effacement : méthode clearRect(x,y,largeur, hauteur)

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 boîte Canvas (400px par 400px) 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 Retour menu