In the previous tutorial, we saw how easy it is to create a canvas using FabricJS. The canvas class is responsible for managing all the FabricJS objects by accepting an id and returning the instance of fabric.Canvas.
Let us see the constructor definition of FabricJS Canvas
new fabric.Canvas(HTMLElement | String, Options: Object): objectWe can see that the first argument specifies the <canvas> element on which the instance is actually initialized( basically, it is the id of out html canvas element that is being passed as a String).
The second argument denotes the optional options object. Wow that’s a lot of o’s right there…
Let me explain with an analogy.
We can customize the canvas in various ways by using these options or properties. The good news is that, all of the options that we can use for the canvas class have been listed down here.
Changing the background of a canvas instance
We can change the background of a canvas instance by changing its background colour or changing its background image.
We can change the background colour by using the backgroundColor property and assigning it a string value. In a similar fashion, the background image can be changed by using backgroundImage property and assigning it the URL of the image that we want to use. Here is a code example for that:-
<!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>
<h2>How to set a background image using FabricJS</h2>
<canvas id="canvas" style="border: 2px solid black"></canvas>
<script>
var canvas = new fabric.Canvas("canvas", {
width: 600,
height: 400,
backgroundImage:
"https://images.unsplash.com/photo-1587405254461-abd1d1c7440e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80",
});
</script>
</body>
</html>The output will look like this:-
You can see that although we have successfully changed the background image, there is a bigger flaw in our code which is- it is simply clumsy looking. We would be on the verge of a mental breakdown if we had 1000 lines of code instead of only 19. Assigning properties to different values is AOKAY if you are working on a fairly simple project. However, the best practice would be create reusable blocks of code instead of passing the same properties to different objects for n number of times.
This is where methods come into play.
Using the setBackgroundImage method
You can click here, press ctrl+F and type setBackgroundImage to see the constructor definition. The first argument is the image URL. However, the second and third arguments allow us to invoke a callback when the image is loaded and assign optional properties to that background image.
In the code example below, I have used the properties top and left to set the top and left offset of the image respectively.
<!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>
<h2>How to set a background image using FabricJS</h2>
<canvas id="canvas" style="border: 2px solid black"></canvas>
<script>
var canvas = new fabric.Canvas("canvas", {
width: 600,
height: 400,
});
// This is the image url that we want to use
var url =
"https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=843&q=80";
// Using setBackgroundImage method
canvas.setBackgroundImage(url, canvas.renderAll.bind(canvas), {
top: -50,
left: -100,
});
</script>
</body>
</html>You can try copying this code example on your text editor to see the output. Don’t shy away from playing around with more properties as well! The best way to learn is to experiment.
Code example to demonstrate how to use the add and clone methods
Here is another set of methods that the canvas class provides us. The add method simply adds any object that we pass to it. Here, we have created a rectangle object( we will dive deeper into that in further tutorials ) and added it to the canvas by calling canvas.add(rect).
In successive lines we have used the clone method to clone the rectangle object that we just added to the canvas. The clone method receives a callback function as the first argument. Hence, you can see that I have created a function and passed it the cloned object. Further I have set the left value of that cloned object by using the set method.
<!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>
<h2>How to use the add and clone methods</h2>
<canvas id="canvas" style="border: 2px solid black"></canvas>
<script>
var canvas = new fabric.Canvas("canvas", {
width: 600,
height: 400,
});
var rect = new fabric.Rect({
width: 60,
height: 30,
top: 50,
fill: "blue",
});
// Adding the rectangle object to the canvas
canvas.add(rect);
/*Using the clone method to clone the rectangle object*/
rect.clone(function (clonedObj) {
// Setting the properties of the cloned object
clonedObj.set("left", 100);
canvas.add(clonedObj);
canvas.renderAll();
});
rect.clone(function (clonedObj) {
// Setting the properties of the cloned object
clonedObj.set("left", 200);
canvas.add(clonedObj);
canvas.renderAll();
});
rect.clone(function (clonedObj) {
// Setting the properties of the cloned object
clonedObj.set("left", 300);
canvas.add(clonedObj);
canvas.renderAll();
});
rect.clone(function (clonedObj) {
// Setting the properties of the cloned object
clonedObj.set("left", 400);
canvas.add(clonedObj);
canvas.renderAll();
});
</script>
</body>
</html>
The list goes on and on…. I hope this tutorial helped somehow. There is a lot to explore and we will learn about how to create various objects in FabricJS in later lessons. Thanks for sticking around!
