In this tutorial, we will learn how to set the padding of a rectangle using FabricJS. Rectangle is one of the various shapes provided by FabricJS. In order to create a rectangle, we must create an instance of thefabric.Rectclass and add it to the canvas.
Just like we can specify the position, color, opacity and size of the rectangular object in the canvas, we can also set the fill of the rectangular object. This can be done using thepaddingattribute.
new fabric.Rect({ padding : Number }: Object)
Options (optional)- This parameter is an object which is our rectangle Provides additional customization. Using this parameter, you can change properties related to the object for whichpaddingis an attribute, such as color, cursor, stroke width, and many other properties.
Fill- This property acceptsnumericvalues. The specified value determines the distance between the rectangular object and its controlling bounding box.
Default appearanceDoes not use padding
Let’s look at a code example, It shows the appearance of a rectangular object when thepaddingproperty is not used. As we can see, there is no space between the object and its surrounding control boundaries. This means there is zero padding between the rectangle and its controlling border.
Default appearance when padding is not used
You can select the rectangle to see there is no space between the object and its controlling borders.
Passing padding property as key
In this example, we are passing padding property as key with value 7. this Indicates that the distance between the rectangular object and all its objects is 7px Control boundaries.
Passing padding property as key
You can select the rectangle to see the padding between the object and its controlling borders.
The above is the detailed content of How to set the padding of a rectangle using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
