- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
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
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>