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 an Ellipse with a background color using FabricJS?
In this tutorial, we are going to create an Ellipse with background color using FabricJs. Ellipse is one of the various shapes provided by FabricJS. In order to create an ellipse, we have to create an instance of fabric.Ellipse class and add it to the canvas. The backgroundColor property allows us to assign a color to our object's background. It is the color of the container where the ellipse lives and is rectangular in shape for ellipse.
Syntax
new fabric.Ellipse({ backgroundColor: String }: Object)Parameters
options (optional) − This parameter is an Object which provides additional customizations to our ellipse. Using this parameter color, cursor, stroke width and a lot of other properties can be changed related to the Ellipse of which backgroundColor is a property.
Options Keys
backgroundColor − This property accepts a String which determines the color of our object's background. The value can be a hexadecimal value, an rgba value or simply the name of the color which we want our background color to be.
Example 1
Passing backgroundColor property as key with a hexadecimal value
The following example demonstrates how to assign a background color to an ellipse object using a hexadecimal value of color. In this example, we have used the hex color code #d0db61 which is a dark khaki color.
<!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 an Ellipse with a background color using FabricJS?</h2>
<p>Observe the dark khaki color which we have applied as the background color.</p>
<canvas id="canvas" width="700" height="300" style="margin-left: 2px"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an Ellipse instance
var ellipse = new fabric.Ellipse({
left: 180,
top: 100,
rx: 90,
ry: 50,
fill: "#74c365",
stroke: "#00b7eb",
strokeWidth: 2,
backgroundColor: "#d0db61"
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Example 2
Passing backgroundColor property as key with a rgba value
We can use an RGBA value, instead of a hexadecimal color code, which stands for: red, green, blue and alpha. The alpha parameter specifies the opacity of a color. In this example, we have used the rgba value (255,0,0,0.7) which is the color red with 0.7 opacity.
<!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 an Ellipse with a background color using FabricJS?</h2>
<p>Observe the background color which we have applied using an "rgba" value.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an Ellipse instance
var ellipse = new fabric.Ellipse({
left: 180,
top: 100,
rx: 90,
ry: 50,
fill: "green",
stroke: "blue",
strokeWidth: 2,
backgroundColor: "rgba(255,0,0,0.7)",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
331 Views
