Open In App

HTML Canvas Rectangles

Last Updated : 24 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The HTML Canvas Rectangles facilitate the rect() method to draw rectangles on canvas. There are various attributes in the rect(x, y, width, height) method such as x and y defining the coordinates of the upper-left corner of the rectangle, width defining the width of the rectangle, and height defining the height of the rectangle.

fillRect() Method

The fillRect() method is used to draw a filled rectangle. The color is defined using the fillStyle property.

Syntax

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

Attributes

  • x: The x-coordinate in fillRect is one of the parameters of the upper-left corner of the rectangle.
  • y: The y-coordinate in fillRect is one of the parameters of the upper-left corner of the rectangle.
  • width: The width of the rectangle, in pixels.
  • height: The height of the rectangle, in pixels.

Example 1: The example shows the rectangle on canvas using fillRect().

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>HTML Canvas Rectangle</title>
    <link rel="stylesheet"
          href="style.css">
</head>

<body>
    <div class="box">
          GeeksforGeeks
      </div>
    <div class="textele">
          HTML Canvas Rectangle 
      </div>
    
    <canvas height="500" 
            width="500" 
            id="canvas-element">
      </canvas>
    <script src="script.js"></script>
</body>

</html>
CSS
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

.box {
    font-size: 40px;
    color: green;
}

#canvas-element {
    border: 2px solid black;
}
.textele{
    font-size: 20px;
}
JavaScript
const canvas_element = 
    document.getElementById("canvas-element");
const context = 
    canvas_element.getContext("2d");

// For Yellow Rectangle

context.fillStyle = "yellow";
context.fillRect(10, 10, 100, 100)

// For Blue Rectangle

context.fillStyle = "blue";
context.fillRect(100, 100, 100, 100)

// For Red Rectangle

context.fillStyle = "red";
context.fillRect(200, 200, 100, 100)

Output:

rectaa
HTML Canvas Rectangles using fillRect()

strokeRect() Method

The strokeRect() method is used to draw the stroked rectangle. The color of the stroke is defined using the strokeStyle property. The default stroke color is black.

Syntax

element.strokeRect(x, y, width, height)

Attributes

  • x: The x-coordinate in strokeRect is one of the parameters of the upper-left corner of the rectangle.
  • y: The y-coordinate in strokeRect is one of the parameters of the upper-left corner of the rectangle.
  • width: The width of the rectangle, in pixels.
  • height: The height of the rectangle, in pixels.
  • linewidth: Show the thickness of the stroke.

Example 2: The example shows the rectangle on canvas using strokeRect().

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                 initial-scale=1.0">
    <title>HTML CANVAS RECTANGLE</title>
    <link rel="stylesheet" 
          href="style.css">
</head>

<body>
    <div class="gfg"> GeeksforGeeks</div>
    <div class="textdiv">
          HTML Canvas Stroke Rectangle
      </div>

    <canvas height="350" 
            width="350"
            id="can-element">
      </canvas>

    <script src="script.js"></script>
</body>

</html>
CSS
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

.gfg {
    font-size: 35px;
    color: green;
}

#can-element {
    border: 4px solid rgb(115, 23, 23);
}
.textdiv{
    font-size: 20px;
}
JavaScript
let element = 
    document.getElementById("can-element").getContext("2d")

element.lineWidth = 5;
element.strokeStyle = "red"
element.strokeRect(100, 100, 200, 100)

element.lineWidth = 8;
element.strokeStyle = "yellow"
element.strokeRect(50, 50, 200, 250)

element.lineWidth = 3;
element.strokeStyle = "green"
element.strokeRect(10, 10, 100, 100)

Output:

res
HTML Canvas Rectangles using strokeRect()

clearRect() Method

The clearRect() Method is used to clear the area inside the rectangle.

Syntax

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

Attributes

  • x: The x-coordinate in clearRect is one of the parameters of the upper-left corner of the rectangle.
  • y: The y-coordinate in clearRect is one of the parameters of the upper-left corner of the rectangle.
  • width: The width of the rectangle to clear the area in pixels.
  • height: The height of the rectangle to clear the area in pixels.

Example 3: The example shows the rectangle on canvas using clearRect().

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                  initial-scale=1.0">
    <title>HTML Canvas Rectangle</title>
    <link rel="stylesheet" 
          href="style.css">
</head>

<body>
    <div class="geeks">
          GeeksforGeeks
      </div>
    <div class="textele">
          HTML Canvas Clear Rectangle 
      </div>
    <canvas height="400"
            width="400"
            id="canvas-ele">
    </canvas>
    <script src="script.js"></script>
</body>

</html>
CSS
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

.geeks {
    font-size: 40px;
    color: green;
}

#canvas-ele {
    border: 5px solid black;
}
.textele{
    font-size: 20px;
}
JavaScript
const canvas_element = 
    document.getElementById("canvas-ele")
const context = 
    canvas_element.getContext("2d");


// For Blue Rectangle
context.fillStyle = "blue";
context.fillRect(100, 100, 200, 200)

context.clearRect(120, 120, 100, 100)
context.stroke()

Output:

rectcle
HTML Canvas Rectangles using clearRect()

Next Article

Similar Reads