Open In App

HTML canvas rect() Method

Last Updated : 09 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The rect() method in HTML is used to create a rectangle in HTML. Syntax:

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

Parameters:

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

Example-1: 

html




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


Output: Example-2: 

html




<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas rect() Method
    </title>
</head>
  
<body>
    <canvas id="GFG" 
            width="500" 
            height="300">
  </canvas>
  
    <script>
        var x = 
            document.getElementById("GFG");
        var context = 
            x.getContext("2d");
        context.rect(50, 50, 350, 200);
  
        var x = document.getElementById("GFG");
        var context = x.getContext("2d");
        context.rect(100, 100, 250, 100);
        context.strokeStyle = "green";
        context.lineWidth = "10";
        context.font = "30px Arial";
        context.fillText("GeeksforGeeks", 120, 150);
        context.stroke();
    </script>
</body>
  
</html>


Output: Supported Browsers:

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


Previous Article
Next Article

Similar Reads

jQWidgets jqxDraw rect() Method
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxDraw is a small jQuery-based plugin that is used to draw shapes and texts using VML, SVG, and HTML. The rect() method is used for creating a rectangle element
2 min read
p5.js rect() Function
The rect() function is an inbuilt function in p5.js which is used to draw the rectangle on the screen. A rectangle contains four sides and four angles. Each angle of the rectangle is 90 degree. The length of the opposite sides of rectangles are equal. Syntax: rect( x, y, w, h, tl, tr, br, bl ) or rect( x, y, w, h, detailX, detailY ) Parameters: Thi
2 min read
Fabric.js | Rect borderScaleFactor Property
In this article, we are going to see how to scale the controlling borders of the canvas rectangle using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. Approach: To make
2 min read
Fabric.js | Rect dirty Property
In this article, when we set the dirty property to true then the object cache will be rerendered next render call to canvas rectangle using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color
2 min read
Fabric.js | Rect cornerStyle Property
In this article, we are going to see how to set the style of controlling corners of the canvas rectangle using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width.Approach: T
2 min read
Fabric.js | Rect cornerStrokeColor Property
In this article, we are going to see how to set the stroke color of controlling corners of the canvas rectangle using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. App
2 min read
Fabric.js | Rect cornerSize Property
In this article, we are going to see how to set the size of controlling corners of the canvas rectangle using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. Approach: T
2 min read
Fabric.js | Rect fill Property
In this article, we are going to see how to set the fill color of canvas ellipse using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. Approach: To make it possible, we
2 min read
Fabric.js | Rect cornerDashArray Property
In this article, we are going to see how to set the dash pattern of controlling corners of the canvas rectangle using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To
2 min read
Fabric.js | Rect centeredRotation Property
In this article, we are going to see how to disable the centered rotation of the canvas rectangle using FabricJS. The canvas rectangle means rectangle is movable and can be stretched according to requirement. Further, the rectangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To make this poss
2 min read