HTML Canvas - rect() Method

The HTML Canvas rect() method is a constructor method which can be used to draw a rectangle on the current path inside the Canvas element.

It is from the CanvasRenderingContext2D interface and adds the input rectangle onto the current path.

When this method is called, the co-ordinates passed is taken as the top left co-ordinates of the rectangle to be drawn. Width and height mentioned are collectively used to draw the rectangle.

Syntax

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

CanvasRenderingContext2D.rect(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 rect() is called, input parameter values are used to draw a rectangle on current available path inside the canvas element.

Example

The following example creates a filled rectangle using the HTML Canvas rect() method on the current path. Implementation code is given below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" width="350" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function Context() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            context.beginPath();
            context.fillStyle = 'red';
            context.rect(50, 50, 200, 150);
            context.fill();
            context.closePath();
         }
      </script>
   </body> 
</html>

Output

The output returned by the above code on webpage as −

Example

The following example creates Germany country flag using three rectangles using rect() method on the current path. Implementation code is given below.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body onload="Context();">
      <canvas id="canvas" width="350" height="250" style="border: 1px solid black;"></canvas>
      <script>
         function Context() {
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            
            // germany flag
            context.beginPath();
            context.fillStyle = 'black';
            context.rect(50, 10, 200, 50);
            context.fill();
            context.closePath();
            context.beginPath();
            context.fillStyle = 'red';
            context.rect(50, 60, 200, 50);
            context.fill();
            context.closePath();
            context.beginPath();
            context.fillStyle = 'gold';
            context.rect(50, 110, 200, 50);
            context.fill();
            context.closePath();
         }
      </script>
   </body>
</html>

Output

The output returned by the above code on webpage as −

html_canvas_rectangles.htm