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 create a canvas with Rectangle using FabricJS?
In this tutorial, we are going to learn how to create a canvas with a Rectangle object 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.
Syntax
new fabric.Rect({ width: Number, height: 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 rectangle object of which width and height are properties.
Options Keys
-
width ? This property accepts a Number which specifies the object's width.
-
height ? This property accepts a Number which specifies the object's height.
Example 1: Creating a Basic Rectangle
Creating an instance of fabric.Rect() and adding it to our canvas
Let's see a code example of how we can add a rectangle to our canvas. Here we have created an object with a width of 100px and a height of 70px. Also, we have used the colour "green" as a fill colour.
<!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>Creating an instance of fabric.Rect() and adding it to our canvas</h2>
<p>You can click on the rectangle and interact with it</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: 115,
top: 50,
width: 100,
height: 70,
fill: "green",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Example 2: Using the Set Method
Manipulating the Rectangle object by using the set method
In this example, we have assigned the properties to the rectangle by using the set method which is a setter for values. Any property related to stroke, strokeWidth, angle, scaling, rotation, etc, can be mutated by using this method.
<!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>Manipulating the Rectangle object by using the set method</h2>
<p>You can click on the rectangle and interact with it</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();
// Using set to set the properties
rect.set("left", 119);
rect.set("top", 60);
rect.set("width", 170);
rect.set("height", 90);
rect.set("angle", 45);
rect.set("fill", "#bdda57");
rect.set("stroke", "#d9e650");
rect.set("strokeWidth", 4);
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>
Key Properties
The Rectangle object supports various properties for customization:
- left/top - Position on the canvas
- width/height - Dimensions of the rectangle
- fill - Fill color of the rectangle
- stroke - Border color
- strokeWidth - Border thickness
- angle - Rotation angle in degrees
Conclusion
FabricJS makes it easy to create and manipulate rectangles on HTML5 canvas. You can either pass properties during initialization or use the set method to modify properties after creation.
664 Views
