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 add an object to a canvas using FabricJS?
In this article, we are going to learn how to add an object to the canvas by using the add method. After creating our canvas, we can populate it with various objects available in FabricJS like fabric.Circle, fabric.Ellipse or fabric.Line, etc.
Syntax
canvas.add(object: fabric.Object);
Parameters
object ? This parameter is of type fabric.Object and holds the objects that we want to add to our canvas.
Example 1: Creating Object Instance Inside canvas.add()
Instead of creating the instance of an object first and then rendering it on the canvas by using the add() method, we can directly do so inside the add() method. Here is an example to illustrate that ?
<!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>How to add an object to a canvas in Fabric.js</h2>
<p>Here you will get a circle as the object on the canvas</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Creating and adding circle object directly
canvas.add(new fabric.Circle({
radius: 40,
fill: "#9370db",
top: 100,
left: 100,
}));
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Creating Object First, Then Adding to Canvas
In this example, we will see how we can create a triangle object by using the fabric.Triangle class and add it to the canvas using a separate variable.
<!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>How to add an object to a canvas in Fabric.js</h2>
<p>Here you will get a triangle as the object on the canvas</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Creating an instance of the fabric.Triangle class
var triangle = new fabric.Triangle({
width: 60,
height: 70,
fill: "#87a96b",
left: 30,
top: 20
});
// Adding it to the canvas
canvas.add(triangle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Adding Multiple Objects
You can also add multiple objects at once by passing them as separate arguments to the add() method:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Adding Multiple Objects to Canvas</h2>
<canvas id="canvas"></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
radius: 30,
fill: "red",
left: 50,
top: 50
});
var rectangle = new fabric.Rect({
width: 80,
height: 40,
fill: "blue",
left: 150,
top: 50
});
// Adding multiple objects at once
canvas.add(circle, rectangle);
canvas.setWidth(300);
canvas.setHeight(200);
</script>
</body>
</html>
Conclusion
The canvas.add() method in FabricJS provides a simple way to add objects to your canvas. You can either create objects directly within the add() method or create them separately and then add them to the canvas.
368 Views
