In this article I’ll show how you can create and play around with rectangle objects in FabricJS.
Let us see the constructor definition first:
new fabric.Rect( options: Object )As I had explained in my earlier article, the Rectangle class extends fabric.Object and returns us an instance of fabric.Rect. The options are nothing but properties which allow us to customize our rectangle.
Initializing & customizing the rectangle
In the code below you can see that I have created an instance of fabric.Rect and added it to the canvas by using the add method. The add method simply adds an object to the canvas.
Since, the options parameter accepts an object, all the properties have to be listed as key: value pairs. I have used the following properties in the options parameter:
- top: Number value signifying top position of the object. Here, the value used is 90.
- left: Number value signifying the left postion of the object. Here, the value used is 70.
- width: Denotes the width of the rectangle. In this case, the rect object is 50 px wide.
- height: Denotes the height of the rectangle. In this case, the rect object is 45 px wide.
- fill: Fill colour of an object. I’ve used a hexadecimal value over here. You can also use rgba value like so- fill: “rgba(248,222,126,1)”
- angle: Denotes the angle in degrees.
- scaleX: horizontal scale factor. Here we have used a whole number, but you can use decimal values too (for eg: 1.5)
- scaleY: vertical scale factor.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<canvas
id="canvas"
style="border: 2px solid black"
width="400"
height="300"
></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
// Creating a rectangle object
var rect = new fabric.Rect({
top: 90,
left: 70,
width: 50,
height: 45,
fill: "#f8de7e",
angle: 15,
scaleX: 2,
scaleY: 2,
});
// Adding it to the canvas
canvas.add(rect);
</script>
</body>
</html>Exploring more properties
Let’s have a round 2 with the options parameter. In this example I’ve created two rectangle objects. The object babyRect is basically the copied version of the original rectangle object but all I did was get rid of scaleX and scaleY.
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<canvas
id="canvas"
style="border: 2px solid black"
width="400"
height="300"
></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
// Creating a rectangle object
var rect = new fabric.Rect({
top: 90,
left: 70,
width: 50,
height: 45,
fill: "rgba(248,222,126,1)",
angle: 15,
scaleX: 2,
scaleY: 2,
objectCaching: false,
});
// Initiating another rectangle object
var babyRect = new fabric.Rect({
top: 10,
left: 20,
width: 50,
height: 45,
fill: "rgba(248,222,126,1)",
angle: 15,
});
// Changing the fill color of the bigger rectangle when mousedown event occurs
rect.on("mousedown", () => {
rect.set("fill", "#9370db");
});
// Making the bigger rectangle invisible when it is moved
rect.on("moving", () => {
rect.set("visible", false);
});
// Again making it visible
rect.on("modified", () => {
rect.set("visible", true);
});
// Adding it to the canvas
canvas.add(rect, babyRect);
canvas.renderAll();
</script>
</body>
</html>
The bigger rectangle becomes invisible when it is moved is because we have set the visible property as false. You can also see that I have used events in this example. The on() method simply attaches the events that are passed by us to the rect object and fires the function when that event occurs.
Although I have used an arrow function here, this example will work just fine even if you use the normal function syntax. If you don’t know about arrow functions, click here.
So, we got to know a little bit more about drawing objects today. In the next article we’ll learn about how we can draw circle on the canvas.
