How to create a canvas with a class using FabricJS?

FabricJSJavascriptHTML5 Canvas

In this article, we will see how to create a canvas with a class on it using the containerClass property. In order to have access over the native HTML canvas element, we can add a wrapper class over it. This class allows us to have control over the element to add interactivity or styling as per requirement.

Syntax

new fabric.Canvas(element: HTMLElement|String, { containerClass: String}: Object)

Parameters

  • element − This parameter is the <canvas> element itself which can be derived using document.getElementById() or the id of the <canvas> element itself. The FabricJS canvas will be initialized on this element.

  • options (optional) − This parameter is an Object which provides additional customizations to our canvas. Using this parameter color, cursor, border width and a lot of other properties can be changed related to the canvas. containerClass is one of them which will help us add the wrapper class to the canvas.

Example 1

The following example demonstrates how to create a Canvas using the containerClass property and then inspect the HTML DOM to see if the class is added.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>How to create a canvas with a class using FabricJS?</h2>
   <p>Here we have used the containerClass property.</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         // Name of the wrapper class to be used on the canvas
         containerClass: "className",
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Now open Dev toolsElements tab. Here you will notice that the class name that we provided is used as the name of the class.

Example 2

Let's see a code example to create a Canvas using the containerClass property and then use that class to add CSS styling to the canvas.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
   <style>
      .demo {
         background-color: #ffe4e1;
      }
   </style>
</head>
<body>
   <h2> Creating a canvas with a class using FabricJS </h2>
   <p> Here we have set a wrapper class and then used it to style our canvas. </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         // Name of the wrapper class to be used on the canvas
         containerClass: "demo",
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>
raja
Updated on 19-May-2022 08:39:28

Advertisements