Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the padding of a Rectangle using FabricJS?
In this tutorial, we are going to 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 will have to create an instance of fabric.Rect class and add it to the canvas.
Just as we can specify the position, colour, opacity and dimension of a rectangle object in the canvas, we can also set the padding of a rectangle object. This can be done by using the padding property.
Syntax
new fabric.Rect({ padding : Number }: Object)
Parameters
-
Options (optional) ? This parameter is an Object which provides additional customizations to our rectangle. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the object of which padding is a property.
Options Keys
-
padding ? This property accepts a Number value. The value that is assigned determines the distance between the rectangle object and its controlling borders.
Example 1: Default Appearance Without Padding
Let's see a code example that displays the appearance of our rectangle object when the padding property is not used. As we can see, there is no space between the object and its surrounding controlling borders. This means that there is zero padding between the rectangle and its controlling borders.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Default appearance when padding is not used</h2>
<p>You can select the rectangle to see there is no space between the object and its controlling borders.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 55,
top: 90,
width: 170,
height: 70,
fill: "#ffb347",
stroke: "#191970",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Using Padding Property
In this example, we are passing the padding property as key with a value of 7. This indicates that there will be a 7px distance between the rectangle object and all of its controlling borders.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Passing padding property as key</h2>
<p>You can select the rectangle to see the padding between the object and its controlling borders.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 55,
top: 90,
width: 170,
height: 70,
fill: "#ffb347",
stroke: "#191970",
strokeWidth: 5,
padding: 7,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Key Points
- The padding property creates space between the rectangle object and its selection borders
- Padding value is specified in pixels as a number
- When padding is 0 (default), the selection borders touch the rectangle edges
- Higher padding values create more space around the object when selected
Conclusion
The padding property in FabricJS allows you to control the spacing between a rectangle object and its controlling borders. This feature is particularly useful for improving object selection visibility and user interaction experience.
671 Views
