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 add stroke to a Circle using FabricJS?
In this tutorial, we are going to learn how to add stroke to a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will create an instance of fabric.Circle class and add it to the canvas. Our circle object can be customized in various ways like changing its dimensions, adding a background color or by changing the colour of the line drawn around the object. We can do this by using the stroke property.
Syntax
new fabric.Circle({ stroke: String }: Object)
Parameters
options (optional) ? This parameter is an Object which provides additional customizations to our circle. Using this parameter, properties such as colour, 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 colour of that object's border.
Example 1: Using Hexadecimal Color Value
Let's see an example to understand how our circle object appears when the stroke property is used. A hexadecimal colour code starts with a "#" followed by a six-digit number representing a colour. In this case, we have used "#ff4500" which is an orange-red colour.
<!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>Adding stroke to a circle using FabricJS</h2>
<p>Notice the orange-red outline around the circle. It appears as we have applied the <b>stroke</b> property and assigned it a hexadecimal color code.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 50,
top: 90,
radius: 50,
fill: "#4169e1",
stroke: "#ff4500",
strokeWidth: 5
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
A blue circle with an orange-red stroke border will be displayed on the canvas.
Example 2: Using RGBA Color Value
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 colour code, which stands for: red, green, blue and alpha. The alpha parameter specifies the opacity of a colour. In this example, we have used the rgba value (255,69,0,0.5) which is an orange-red color 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>Adding stroke to a circle using FabricJS</h2>
<p>Notice the outline around the circle. Here we have applied the <b>stroke</b> property and assigned it an 'rgba' value.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 50,
top: 90,
radius: 50,
fill: "#4169e1",
stroke: "rgba(255,69,0,0.5)",
strokeWidth: 5
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
A blue circle with a semi-transparent orange-red stroke border will be displayed on the canvas.
Key Points
- The
strokeproperty accepts color values in multiple formats: hexadecimal, RGB, RGBA, and named colors - Use
strokeWidthproperty to control the thickness of the stroke - RGBA values allow you to control opacity with the alpha parameter (0 = transparent, 1 = opaque)
- The stroke appears as an outline around the shape's border
Conclusion
Adding strokes to FabricJS circles is straightforward using the stroke property. You can customize the appearance using hexadecimal colors for solid strokes or RGBA values for semi-transparent effects.
337 Views
