Méthode : CanvasRenderingContext2D.fillRect()

Affiche un rectangle rempli dans le canvas

Syntaxe
myContext.fillRect(x, y, largeur, hauteur);

Compatible tous navigateurs

Oui

Description
Affiche un rectangle de dimension largeur et hauteur à partir de son sommet en haut à gauche de position (x,y).

La méthode rect() affiche uniquement les contours du rectangle.

Exemple 1 : Différences en rect() et fillRect()

Code source

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

myContext.strokeStyle="#f00";
myContext.lineWidth="2";
myContext.fillStyle="#316AC5";

myContext.fillRect(10,10,280,130);
myContext.rect(10,10,280,130);
myContext.stroke();
</script>

Résultat

Emulation de la console

Explication

Différences en rect() et fillRect() avec un rectangle plein et son contour.

N'oubliez pas stroke() pour afficher rect().

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 21/09/2017