Open In App

HTML Canvas Rectangles

Last Updated : 30 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
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(
  
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(
  
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(
  
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()



Previous Article
Next Article

Similar Reads

HTML Canvas Basics
In this article, we will know HTML Canvas Basics, and their implementation through the examples. The HTML "canvas" element is used to draw graphics via JavaScript. The "canvas" element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and addi
5 min read
How to resize an image in an HTML 5 canvas ?
The canvas element is part of HTML 5 and it allows the rendering of 2D shapes and bitmap(also called "raster") images. A canvas actually has two sizes: the size of the element. the size of the element's drawing surface. The element's width and height attributes set both the size of the element and the size of the element's drawing surface. CSS attr
1 min read
HTML canvas lineWidth Property
The HTML canvas lineWidth property is used to set or return the width of the line (thickness of the line). The width of the line is set in terms of pixels. The default value of this property is 1. Syntax: context.lineWidth = number; Property Values: number: This property value indicates the number which specifies the line width in terms of pixels.
2 min read
HTML canvas textAlign Property
The HTML canvas textAlign Property is used to set or return the current alignment for text content, according to the anchor point. Basically, the text will start at that position and the text will end at that specified position. Syntax: context.textAlign="center | end | left | right | start"; Property Values: start: It has a Default. The text start
2 min read
HTML canvas font Property
The HTML canvas font Property is used to change the present font family of the Text content of the &lt;canvas&gt; element. The font Property has a Default Property i.e 10px sans-serif Syntax: context.font="italic small-caps bold 12px arial"; Property Values: font-family: It is used to set the font type of an HTML element. It holds several font name
2 min read
HTML canvas lineJoin Property
The HTML canvas lineJoin property is used to set or return the type of corner created, when two lines meet, by using the lineJoin property. The type of join can have one of three styles: bevel, round, or miter. However, the join style has generally miter style. Syntax: context.lineJoin = "bevel|round|miter"; Property Values: miter: It is the defaul
2 min read
HTML DOM Canvas Object
The DOM Canvas Object is used to represent the HTML &lt;Canvas&gt; element. The &lt;canvas&gt; tag is used to draw graphics in the document using javascript. It is new in HTML5. The canvas element is accessed by getElementById(). Syntax: accessed by getElementById("id"). Where “id” is the ID assigned to the Canvas tag. Example 1: In this example, w
2 min read
HTML Canvas Draw Bezier Curve
Curves on HTML canvas can be drawn using arcs, but drawing a complex diagram using arcs is quite a tedious task. In the given circumstance, Bezier curve will be very useful in providing more flexibility in drawing curves. Bezier curves on HTML canvas are drawn using a start point, one or more control point/points and an endpoint. Example: In the ca
4 min read
How to get Pixel from HTML Canvas ?
To get the pixel of any specific portion from the HTML canvas you can use the HTML canvas getImageData() Method. The getImageData() method usually returns an ImageData object that contains the pixel information of the specified object on the HTML canvas. Example 1: This example will display each pixel value of the square box. The boxes color is lin
3 min read
HTML canvas shadowColor Property
The Canvas shadowColor property is used to set or returns the color that is used for shadows. The fillStyle property is used to create shadows. This property can be set to a string representing a CSS color value, which we want as shadow color. By default, shadow color is set to black (CSS color value #000000). Syntax:: context.shadowColor = color;
2 min read