Ever heard of the canvas element that allows you to add interactivity to your pages? Well I did not. Until I dipped my toes into HTML5 canvas. However, working with the native canvas API can be a pain in the back especially when it comes to drawing complex shapes, animating those shapes and so on.
Learning FabricJS will allow your websites to stand out and you wouldn’t even have to put a lot of effort for it to do so. But first things first, let’s get these two out of the way:
Objective: to get started with FabricJS
Prerequisites: basic HTML & appetite for knowledge
We know that HTML5 canvas allows us to do the following:
- Create a canvas
- Add certain objects
- Add interactivity and animation
FabricJS simply amps up this functionality with its object-oriented model which allows us to work with objects. You can read more about it from the FabricJS documentation.
Method 1: Importing using script tag
If you want to get started with FabricJS in minutes, the best way would be to import the FabricJS library using the cdn link and hooking it up to a script tag by using the src attribute. The first step would be to create a html file say, index.html. Now we need to do the following steps to complete FabricJS setup:-
- Go to: https://cdnjs.com/libraries/fabric.js and select any version you want to use
- Copy the URL and paste it in your HTML file like so:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>Your html file should look something like this:-
You can see in line number 9, I have added the <canvas> tag and given it an id of canvas. We need this unique id in order for FabricJS to be able to identify the canvas element. Inside a script tag, call the canvas constructor which will create the canvas class instance and allow us to use the canvas class methods. You can see in line number 11, that the new keyword is used to create the instance of fabric.Canvas.
<!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 create a canvas using FabricJS</h2>
<canvas id="canvas" style="border: 2px solid black"></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
</script>
</body>
</html>Finally save and open the HTML file that you just created in your browser. Congrats! You have created canvas by implementing FabricJS.
Method 2: Importing the library from the official website
I would personally ask you to click off before reading this because this is nothing but a waste of time. But if you haven’t then let’s keep going.
- Create a folder named FabricJS
- Create index.js, index.html and style.css files
- Open the folder using VS code
- Also create a folder called library where we would place fabric.min.js file.
- Finally your directory structure should look something like this:-
In order to import the entire library, go to http://fabricjs.com/ and keep scrolling down until you find the link for downloading the latest version. On clicking the link, you would see a spaghetti tangle of code which you need to save as fabric.min.js. You can save this file to your desktop and add it to the library folder that you just created.
Paste the following in your index.js file:-
console.log("stop making your life more difficult than it already is!(0-0)/ ");
var canvas = new fabric.Canvas("canvas", {
width: 500,
height: 400,
backgroundColor: "#dcdcdc",
isDrawingMode: true,
});Try console logging in your index.js file to see if your files are working properly. Since we have created a canvas instance, we can give it some properties in the second argument which is an Object. This allows us to add optional options which can be used to customize the canvas. Note how we have used the properties called width, height, backgroundColor, isDrawingMode. These are all a part of the options listed down for the canvas class.
Paste the following in your style.css file:-
body {
margin: 0;
padding: 0;
}This would get rid of any additional margin or padding that may be present.
Paste the following in your index.html file:-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2>Hello World</h2>
<canvas id="canvas" style="margin: 0; border: 10px solid red"></canvas>
<script src="./library/fabric.min.js"></script>
<script src="index.js"></script>
</body>
</html>Finally on opening the index.html file in your browser, it would appear something like this:-
(Simply put, you will see Hello World followed by a canvas with a grey background and red border.)
Since drawing mode is turned on, you will be able to draw anything by simply clicking and dragging your mouse on the canvas. I would advise you to not worry too much about options right away. There is a lot to learn but it is fairly easy so you would get the hang of it fairly quickly.
That is it for todays tutorial. I hope you learned something. ^-^)/
