Open In App

Fabric.js Canvas containerClass Property

Last Updated : 30 Jul, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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=
    </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>


Output:



Similar Reads

Fabric.js Canvas backgroundColor Property
In this article, we are going to see how to set the background color of a Canvas in Fabric.js using the backgroundColor 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 al
2 min read
Fabric.js Canvas backgroundImage Property
In this article, we are going to see how to set the background image of a Canvas in Fabric.js using the backgroundImage 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 al
2 min read
Fabric.js Canvas defaultCursor Property
In this article, we are going to see how to set the default cursor of a canvas in Fabric.js using the defaultCursor 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 allowi
2 min read
Fabric.js Canvas selection Property
In this article, we are going to see how to enable or disable the selection of objects in a canvas in Fabric.js using the selection 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 f
2 min read
How to remove borders of a canvas-type text using Fabric.js ?
In this article, we are going to see how to remove the borders of a canvas-like text using FabricJS. The canvas means text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we are going to use a JavaScript library called FabricJS. After importing
2 min read
How to add shadow to a canvas circle using Fabric.js ?
In this article, we are going to see how to add shadow to a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possible, we are going to use a JavaScr
2 min read
How to create a simple editable canvas textbox using Fabric.js?
In this article, we are going to create a canvas textbox using Fabric.js. The canvas means text written in the Textbox is movable and can be stretched according to requirement. Further, the text itself can be edited into anything else too because it is a textbox. Creating structure: To make this possible we are going to use a JavaScript library cal
2 min read
How to create a canvas circle using Fabric.js ?
In this article, we are going to see how to create a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possible we are going to use a JavaScript libr
2 min read
How to create a canvas ellipse using Fabric.js ?
In this article, we are going to see how to create a canvas ellipse using FabricJS. The canvas means the ellipse is movable and can be stretched according to requirements. Further, the ellipse can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possible we are going to use a JavaScript
2 min read
How to create a canvas polygon using Fabric.js ?
In this article, we are going to see how to create a canvas polygon using FabricJS. The canvas means the polygon is movable and can be stretched according to requirements. Further, the polygon can be customized when it comes to the initial fill color and its coordinates. Approach: To make it possible we are going to use a JavaScript library called
2 min read