Open In App

HTML canvas fillRect() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The fillRect() method is used to fill the rectangle using the given color. The default color of the fillRect() method is black. Syntax:

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

Parameters: This method accepts four parameters as mentioned above and described below:

  • x: It stores the x-coordinate of top-left corner of rectangle.
  • y: It stores the y-coordinate of top-left corner of rectangle.
  • width: It stores the width in pixel.
  • height: It stores the height in pixel.

Example 1: This example uses fillRect() method to create rectangle and filled with default color (black). 

html




<!DOCTYPE html>
<html>
<head>
    <title>
        HTML canvas fillRect() Method
    </title>
</head>
<body>
    <canvas id="GFG" width="500" height="300"></canvas>
      
    <script>
        var x = document.getElementById("GFG");
        var context = x.getContext("2d");
        context.fillRect(50, 50, 350, 200);
        context.stroke();
    </script
  
</body>
</html>


Output: Example 2: This example uses fillRect() method to create rectangle and filled with ve color (green). 

html




<!DOCTYPE html>
<html>
<head>
    <title>
        HTML canvas fillRect() Method
    </title>
</head>
<body>
    <canvas id="GFG" width="500" height="300"></canvas>
      
    <script>
        var x = document.getElementById("GFG");
        var context = x.getContext("2d");
        context.fillStyle = "green";
        context.fillRect(50, 50, 350, 200);
        context.stroke();
    </script
  
</body>
</html>


Output: Supported Browsers: The browsers supported by fillRect() method are listed below:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Safari
  • Opera


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads