Fabric.js Canvas containerClass Property

Last Updated : 30 Jul, 2021

In this article, we are going to see how to set the wrapper class of a Canvas in Fabric.js using the containerClass property. The canvas in Fabric.js is used as a wrapper over the native canvas object provided by HTML. It provides high-level access to the underlying canvas allowing it to have an object model, allow parsing for SVG files, and allowing the canvas to have interacted in an intuitive manner.

Approach: To make it possible we are going to use a JavaScript library called Fabric.js. After importing the library, we will create the canvas block in the body tag. We will also create the class in CSS that will be used as a wrapper for the canvas. After this, we will initialize an instance of the canvas object provided by Fabric.js and set the wrapper class of the canvas using the containerClass property.

Syntax:

fabric.Canvas(canvasElement, {
    containerClass: String
});

Parameters: This property accepts a single parameter as mentioned above and described below.

containerClass: It is a string that specifies the name of the wrapper class to be used on the Canvas.

Example: The below example illustrates the use of Fabric.js Canvas containerClass property in JavaScript.

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> 
  
    <style> 
  
        /* Define the class to be used 
        as the wrapper of the Canvas */ 
        .myClass { 
            border: 10px dashed green; 
            background-color: orange; 
        } 
    </style> 
</head> 
  
<body> 
    <div style="text-align: center; 
              width: 500px;"> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <b> 
            Fabric.js | Canvas containerClass Property 
        </b> 
    </div> 
  
    <canvas id="canvas" width="500" height="300"> 
    </canvas> 
  
    <script> 
  
        // Initiate a Canvas instance  
        let canvas = new fabric.Canvas("canvas", { 
            // Set the wrapper class 
            // of the Canvas 
            containerClass: "myClass" 
        }); 
    </script> 
</body> 
  
</html> 