Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

HTML canvas fillRect() Method

❮ HTML Canvas Reference

Example

Draw a filled 150*100 pixels rectangle:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
fillRect() Yes 9.0 Yes Yes Yes

Definition and Usage

The fillRect() method draws a "filled" rectangle. The default color of the fill is black.

Tip: Use the fillStyle property to set a color, gradient, or pattern used to fill the drawing.

JavaScript syntax: context.fillRect(x,y,width,height);

Parameter Values

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

❮ HTML Canvas Reference