- 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 background color using FabricJS?
In this article, we are going to create a canvas with a given background color using FabricJS. The default background color provided by the FabricJS API is white and it can be customized using the second argument.
Syntax
new fabric.Canvas(element: HTMLElement|String, { backgroundColor: 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 − This parameter is an Object which provides additional customizability to our canvas and backgroundColor is one of them which will help us customize the background color
Example 1
Let's see how to create a Canvas with a background color using FabricJS. Since FabricJS works on top of Canvas API, we will create an HTML element using the <canvas> tag and give it an id.
Further, we will pass that id to the FabricJS API so that it can initialize the FabricJS Canvas instance on the <canvas> tag. In the second argument, we will pass an object with a key backgroundColor and the value as the color we want it to be.
<!DOCTYPE html> <html> <head> <!-- Adding the FabricJS 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 background color using FabricJS</h2> <p>Here we have used 'cyan' as the background color.</p> <canvas id="canvas"> </canvas> <script> // Initiate a Canvas instance and add backgroundColor var canvas = new fabric.Canvas('canvas', { backgroundColor: 'cyan' }); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Example 2
Let's take another example. Here we will create a Canvas with a background color and a Circle object on the canvas.
<!DOCTYPE html> <html> <head> <!-- Adding the FabricJS 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 background color using FabricJS</h2> <p>Here we have created a canvas with a background color and a circle object on the canvas</p> <canvas id="canvas"> </canvas> <script> // Initiate a Canvas instance and add backgroundColor var canvas = new fabric.Canvas('canvas', { backgroundColor: 'cyan' }); // Initiate a Circle instance var circle = new fabric.Circle({ radius: 50, fill: "red", hoverCursor: 'not-allowed', }); // Render the circle in canvas canvas.add(circle); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>