HTML Canvas - fillRect() Method

The HTML Canvas fillRect() method can be used to fill the given area from the point and dimensions given by the parameters.

It is from the CanvasRenderingContext2D interface and fills the given area completely black when no color input is given.

We can give color input using fillStyle property for the context object before drawing the rectangle. It should be clearly defined to avoid any errors resulting in not working of the method.

When this method is called, the co-ordinates passed is taken as the top left co-ordinates of the rectangle area which is filled using the given input or black by default.

Syntax

Following is the syntax of HTML Canvas fillRect() method −

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

Parameters

Following is the list of parameters of this method −

S.No	Parameter & Description
1	x The x co-ordinate value of the starting point of the rectangle.
2	y The y co-ordinate value of the starting point of the rectangle
3	width The width of the drawing rectangle.
4	height The height of the drawing rectangle.

Return values

When the method is called, the rectangular area formed by the given parameters is taken and is filled based on provided input.

Example

The following example creates a filled rectangles and shows how the HTML Canvas fillRect() method can be used to achieve this.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext('2d');
         
         // creating filled rectangle with default color
         context.fillRect(10, 10, 200, 150);
         
         // creating filled rectangle using input color
         context.fillStyle = 'brown';
         context.fillRect(250, 10, 200, 150);
      </script>
   </body>
</html>

Output

The output returned by the above code in webpage as −

Example

The following example fills the whole HTMLCanvasElement interface object canvas area by using fillStyle property.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="500" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById("canvas");
         var context = canvas.getContext('2d');
         context.fillStyle = 'cyan';
         context.fillRect(0, 0, canvas.width, canvas.height);
      </script>
   </body>
</html>

Output

The output returned by the above code in web page as −

html_canvas_rectangles.htm