HTML-canvas fillRect() Methode

Teken een gevulde rechthoek van 150 * 100 pixels:

javascript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Browserondersteuning

De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.

Method
fillRect()	Yes	9.0	Yes	Yes	Yes

De methode fillRect() tekent een "gevulde" rechthoek. De standaardkleur van de vulling is zwart.

Tip: gebruik de eigenschap fillStyle om een kleur, verloop of patroon in te stellen dat wordt gebruikt om de tekening te vullen.

JavaScript-syntaxis:	context .fillRect( x,y,breedte,hoogte );

Parameter	Description	Play it
x	The x-coordinate of the upper-left corner of the rectangle
y	The y-coordinate of the upper-left corner of the rectangle
width	The width of the rectangle, in pixels
height	The height of the rectangle, in pixels