Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a canvas with a class using FabricJS?
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: Basic containerClass Usage
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 tools ? Elements tab. Here you will notice that the class name that we provided is used as the name of the class.
Example 2: Styling Canvas with containerClass
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;
border: 2px solid #ff6b6b;
border-radius: 8px;
}
</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>
How It Works
When you set the containerClass property, FabricJS creates a wrapper div around your canvas element and applies the specified class to this wrapper. This allows you to apply CSS styles to the entire canvas container, including backgrounds, borders, and layout properties that affect the canvas positioning.
Key Points
- The containerClass is applied to a wrapper div, not directly to the canvas element
- This approach allows for better styling control and layout management
- You can use any valid CSS class name as the containerClass value
- Multiple CSS properties can be applied through the wrapper class
Conclusion
The containerClass property in FabricJS provides an easy way to add custom styling and control to your canvas by creating a wrapper div with the specified class. This approach enables better separation of concerns between canvas functionality and visual styling.
721 Views
