HTML canvas fillRect() methode

Definitie en gebruik

fillRect() Methoden om een 'gevuld' rechthoek te tekenen. De standaard vulkleur is zwart.

Tip:Gebruik fillStyle Eigenschappen om de kleur, het gradieert of het patroon te stellen die wordt gebruikt om te vullen.

Voorbeeld

Teken van een gevulde rechthoek van 150*100 pixels:

Uw browser ondersteunt de HTML5 canvas tag niet.

JavaScript:

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

Try it yourself

Syntax

context.fillRect(x,y,width,height);

Parameter value

Parameter Description
x The x coordinate of the top-left corner of the rectangle.
y The y coordinate of the top-left corner of the rectangle.
width The width of the rectangle, in pixels.
height The height of the rectangle, in pixels.

Browser support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.