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 add stroke to an Ellipse using FabricJS?
In this tutorial, we are going to learn how to add stroke to an Ellipse 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. Our ellipse object can be customized in various ways like changing its dimensions, adding a background color or by changing the color of the line drawn around the object. We can do this by using the stroke property.
Syntax
new fabric.Ellipse({ stroke : 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 object of which stroke is a property.
Options Keys
stroke − This property accepts a String and determines the color of that object's border.
Example 1
Passing stroke as key with a hexadecimal value
Let's see an example to understand how our ellipse object appears when the stroke property is used. A hexadecimal color code starts with a "#" followed by a six-digit number representing a color. In this case, we have used "#ff4500" which is an orange-red 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 add stroke to an Ellipse using FabricJS?</h2>
<p>Notice the orange-red outline which appears because we have used the "stroke" property and supplied it with a hexadecimal value "#ff4500"</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: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#4169e1",
stroke: "#ff4500",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>Example 2
Passing an rgba value to the stroke property
In this example, we will see how to assign an "rgba" value to the stroke property. 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,69,0,0.5) which is the color orange-red with 0.5 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 add stroke to an Ellipse using FabricJS?</h2>
<p> Notice the outline of the ellipse. Here we have used the "stroke" property and supplied it with 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: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#4169e1",
stroke: "rgba(255,69,0,0.5)",
strokeWidth: 5,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
137 Views
To Continue Learning Please Login