Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Fabric.js addClass() Method

  • Last Updated : 25 May, 2021

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=
    </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;">
        GeeksforGeeks
    </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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!