Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add curves to a Rectangle using FabricJS?
In this tutorial, we are going to learn how to add curves to 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.
We can customize a rectangle object by specifying its position, colour, opacity and dimension. However, we can also use properties like rx and ry which allow us to assign the horizontal and vertical border radius of a Rectangle.
Syntax
new fabric.Rect({ rx : Number, ry: Number }: Object)Parameters
Options (optional) − This parameter is an Object which provides additional customizations to our rectangle. Using this parameter colour, cursor, stroke width and a lot of other properties can be changed related to the object of which rx and ry are properties.
Options Keys
rx − This property accepts a Number which determines the horizontal border radius.
ry − This property accepts a Number which determines the vertical border radius.
Example 1
Default appearance when rx and ry is not used
Let’s see a code example that will show the default appearance of our rectangle object when the rx and ry properties are not used.
<!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 rx and ry is not used</h2>
<p>You can see that no curves have been added to the rectangle</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: 70,
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>Example 2
Passing rx and ry properties as key
In this example, we are passing rx and ry properties the values 50 and 40, respectively. Due to this, our rectangle object will have a horizontal border radius of 50px and a vertical border radius of 40px.
<!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 rx and ry properties as key</h2>
<p>You can see that horizontal and vertical border radius have been added</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: 70,
top: 90,
width: 170,
height: 70,
fill: "#ffb347",
stroke: "#191970",
strokeWidth: 5,
padding: 7,
rx: 50,
ry: 40,
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
872 Views
