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 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 backgroundColor option.
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: Basic Canvas with Background Color
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: Canvas with Background Color and Objects
Let's take another example. Here we will create a Canvas with a background color and a Circle object on the canvas to demonstrate how objects appear on the colored background.
<!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>
Common Background Color Options
You can use various color formats for the backgroundColor property:
- Color names: 'red', 'blue', 'cyan', 'lightgray'
- Hex values: '#FF0000', '#00FFFF', '#CCCCCC'
- RGB values: 'rgb(255, 0, 0)', 'rgb(0, 255, 255)'
- RGBA values: 'rgba(255, 0, 0, 0.5)' for transparency
Conclusion
Creating a canvas with a background color in FabricJS is straightforward using the backgroundColor option. This property accepts various color formats and provides a foundation for building rich interactive canvas applications.
1K+ Views
