Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Canvas with a Class using Fabric.js
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>
617 Views
