VOOZH about

URL: https://www.geeksforgeeks.org/javascript/p5-js-rect-function/

⇱ p5.js rect() Function - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

p5.js rect() Function

Last Updated : 12 Jul, 2025

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: This function accepts many parameters as mentioned above and described below: 

  • x: It is used to set the x-coordinate of rectangle.
  • y: It is used to set the y-coordinate of rectangle.
  • w: It is used to set the width of rectangle.
  • h: It is used to set the height of rectangle.
  • tl: It is optional parameter and used to set the radius of top-left corner.
  • tr: It is optional parameter and used to set the radius of top-right corner.
  • br: It is optional parameter and used to set the radius of bottom-right corner.
  • bl: It is optional parameter and used to set the radius of bottom-left corner.
  • detailX: It is used to set the number of segment in x-direction.
  • detailY: It is used to set the number of segment in y-direction.


Example 1: 

Output: 
 

👁 Image


Example 2: 

Output: 
 

👁 Image


Example 3: 

Comment