Skip to content
Related Articles
Open in App
Not now

Related Articles

Fabric.js addClass() Method

Improve Article
Save Article
  • Last Updated : 25 May, 2021
Improve Article
Save Article

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
Related Articles

Start Your Coding Journey Now!