Méthode fillRect()
Exemple
Dessinez un rectangle rempli de 150 x 100 pixels :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100); Plus d'exemples ci-dessous.
Description
La méthode fillRect() dessine un rectangle "rempli".
La méthode fillRect() ne modifie pas le chemin actuel.
La valeur par défaut de fillStyle est #000000 (noir solide).
Voir aussi :
La propriété fillStyle (Définir une couleur ou un motif de remplissage)
La méthode strokeRect() (Dessiner un rectangle)
La méthode rect() (Ajouter un rectangle au chemin)
La méthode clearRect() (effacer un rectangle sur le canvas)
Syntaxe
| context .fillRect( x, y, width, height ) |
Valeurs des paramètres
| Param | Description | Jouez-le |
|---|---|---|
| x | La coordonnée x du coin supérieur gauche du rectangle | |
| y | La coordonnée y du coin supérieur gauche du rectangle | |
| width | La largeur du rectangle, en pixels | |
| height | La hauteur du rectangle, en pixels |
Valeur de retour
| AUCUN |
Plus d'exemples
Exemple
Définir une couleur de remplissage rouge pour le rectangle :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rouge";
ctx.fillRect(20, 20, 150, 100); Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
fillRect() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |