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 set the width of stroke of Circle using FabricJS?
In this tutorial, we are going to learn how to set the width of stroke for a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas. The strokeWidth property allows us to specify the width of a stroke for an object.
Syntax
new fabric.Circle({ strokeWidth: Number })
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 strokeWidth is a property.
Options Keys
-
strokeWidth ? This property accepts a Number value which allows us to specify the width of a stroke for an object. Its default value is 1.
Example 1: Default Stroke Width
Let's see a code that depicts the default appearance of the stroke of a circle object. Since we have not used the strokeWidth property, the default width of 1 pixel is being rendered.
<!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>Setting the width of stroke of circle using FabricJS</h2>
<p>Notice the outline border of the circle. This is the default thickness of outline. Here we have not used the <b>strokeWidth</b> property, but by default, it is set to 1.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 40,
fill: "#adff2f",
radius: 100,
stroke: "#228b22"
// strokeWidth: 1 (default value)
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Custom Stroke Width
In this example, we are passing the strokeWidth property with a value of 5. This will make sure that our circle object is rendered with a stroke that has a width of 5 pixels.
<!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>Setting the width of stroke of circle using FabricJS</h2>
<p>Notice the outline border of the circle. Here we have used the <b>strokeWidth</b> property and assigned it a value of 5.</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 40,
fill: "#adff2f",
radius: 100,
stroke: "#228b22",
strokeWidth: 5
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Key Points
- The strokeWidth property controls the thickness of the circle's border
- Default stroke width is 1 pixel if not specified
- Higher values create thicker strokes, lower values create thinner strokes
- The stroke color is controlled by the stroke property
Conclusion
The strokeWidth property in FabricJS provides precise control over circle border thickness. By adjusting this value, you can create circles with thin outlines or bold borders as needed for your design.
323 Views
