Fabric.js addClass() Method

The addClass() method in Fabric.js is used to add the specified class to the specified HTML element. The HTML element in the page has to be selected first to pass this method.

Syntax:

addClass(element, className)

Parameters: This method accept two parameters as mentioned above and described below:

element: This parameter is used to specify the HTML element on which the class has to be added.
className: This parameter is used to specify the class that has to be added to the element.

The below example demonstrates the addClass() method in Fabric.js:

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!-- Adding the Fabric.js library -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
    </script> 
  
    <style> 
      
        /* Define the CSS classes to be used */ 
        .box1 { 
            margin: 12px; 
            width: 100px; 
            height: 100px; 
            background-color: red; 
        } 
  
        .box2 { 
            margin: 12px; 
            width: 100px; 
            height: 100px; 
            background-color: green; 
        } 
  
        .border { 
            border: 5px dashed; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        w3wiki 
    </h1> 
    <h3> 
        Fabric.js util.addClass() Method 
    </h3> 
  
    <div id="box1">Box 1</div> 
    <div id="box2">Box 2</div> 
      
    <script> 
  
        // Select the element that has 
        // to be applied the classes 
        let elem = 
            document.querySelector('#box1'); 
        let elem2 = 
            document.querySelector('#box2'); 
  
        // Add the required classes 
        // to the element 
        fabric.util.addClass(elem, 'box1'); 
        fabric.util.addClass(elem, 'border'); 
  
        fabric.util.addClass(elem2, 'box2'); 
        fabric.util.addClass(elem2, 'border'); 
    </script> 
</body> 
  
</html>

Output:

HTML

Contact Us