Fabric.js

Last Updated : 15 Mar, 2023

Fabric.js is an open-source JavaScript canvas library, that provides the interactive object model built on top of the canvas element. It is also an SVG-to-canvas & canvas-to-SVG parser. It was made by Juriy Zaytsev and was first launched in 2010.

Object-based drawing is one of the sophisticated features that Fabric.js by default provides in addition to animations, scaling, and morphing.

Fabric.js Tutorial

Features of Fabric.js:

It provides a frame for all shapes. We can resize and rotate all the shapes and can customize the size of the frame.
This allows us to group multiple shapes into one.
Fabric.js allows touch support so apps made on Fabric.js runs smoothly on mobile browsers
Fast serialization is made possible by Fabric.js, allowing the conversion of canvas data to JSON format.

Reasons to learn Fabric.js:

Fabric.js is the easiest way to work with HTML5 canvas. Fabric.js also provides an interactive object model on top of the canvas element. Using Fabric.js we can create and populate objects. Fabric.js has the ability to freely move and manipulate objects on the canvas using the mouse pointer

Installation:

There are two methods to install Fabric.js

Method 1 (Install with NPM): To install Fabric.js, we just need to run the below command after that we need to navigate the required file in our HTML file.

npm install fabric --save

Method 2 (Install with Yarn): To install Fabric.js, we just need to run the below command after that we need to navigate the required file in our HTML file.

yarn add fabric

Method 3 (Using CDN link): We can simply use the below-mentioned links in the head section of our HTML file that will enable Fabric.js.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js”></script>

Example: In this example, we will set the background color of a canvas using Fabric.js

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <!-- Adding the FabricJS library -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
    </script> 
</head> 
  
<body> 
    <div style="text-align: center; width: 500px;"> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <b> 
            Fabric.js Example 
        </b> 
    </div> 
  
    <canvas id="canvas" width="500" height="300"
        style="border:1px solid #000000"> 
    </canvas> 
  
    <script> 
  
        // Initiate a Canvas instance 
        var canvas = new fabric.Canvas("canvas", { 
                  
            // Set the background color 
            // of the Canvas 
            backgroundColor: "cyan" 
        }); 
    </script> 
</body> 
</html>