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 clone a canvas using FabricJS?
In this article, we are going to learn how to clone a canvas using FabricJS. We can clone a canvas instance by using the clone() method. Usually, this is useful when we want to send our canvas instance remotely to somewhere else, it is usually a good idea to send the canvas instance clone in JSON form instead of sending the image of the canvas. clone() method helps us create a clone of any canvas instance along with its objects.
Syntax
clone(callback: Function, propertiesToInclude: Array)
Parameters
-
callback (optional) ? This parameter is a callback function which is invoked with a clone.
-
propertiesToInclude (optional) ? This parameter includes any additional properties that we want to be included in the clone canvas instance. This must be in the form of an Array.
Example 1: Cloning a Canvas and Rendering It
Let's see a code example to see how to clone an instance by using the callback method. The clone() method receives a callback function as the first argument within which we are converting our cloned canvas object into JSON. This new cloned canvas object is now overwritten onto the canvas.
<!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>Cloning a Canvas in Fabric.js</h2>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
radius: 50,
fill: "#85bb65",
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Clone the canvas and reload it
canvas.clone(function(clonedCanvas) {
// Convert our cloned Canvas Object to JSON
let canvasJSON = clonedCanvas.toJSON();
// Load the new cloned Canvas Object to canvas
canvas.loadFromJSON(canvasJSON);
console.log("Canvas cloned successfully");
});
</script>
</body>
</html>
Example 2: Passing Additional Properties to the Clone Method
In this example, we will see how we can pass additional properties to the canvas and allow them to be there in the cloned canvas. Additional properties are not cloned by default; we have to use the second parameter to pass the name of properties we want to be there in the cloned instance also.
<!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 clone a canvas using Fabric.js</h2>
<p>Open browser console to see the cloned canvas with additional properties.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance with custom property
var canvas = new fabric.Canvas("canvas", {
"myRandomProperty": "value"
});
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Clone canvas with additional properties
canvas.clone(function(clonedCanvas) {
// Log the cloned Canvas to check if the
// additional property is added or not
console.log("Cloned canvas:", clonedCanvas);
console.log("Custom property:", clonedCanvas.myRandomProperty);
},
["myRandomProperty"]);
</script>
</body>
</html>
Output
When you run the second example and open the browser console, you will see the cloned canvas object with the additional property "myRandomProperty" that we specified in the propertiesToInclude array.
Cloned canvas: fabric.Canvas {myRandomProperty: "value", ...}
Custom property: value
Key Points
-
The
clone()method creates an exact copy of the canvas instance including all objects -
Custom properties are not cloned by default - use the second parameter to include them
-
Cloning is useful for creating backups or sending canvas data remotely
-
The cloned canvas can be converted to JSON format for easy transmission
Conclusion
The FabricJS clone() method provides an efficient way to duplicate canvas instances with all their objects. Use the propertiesToInclude parameter to preserve custom properties in the cloned canvas.
2K+ Views
