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 stroke width of a canvas circle using Fabric.js ?
The stroke and strokeWidth properties are used to set the stroke color and width of a canvas circle in Fabric.js. These properties allow you to customize the border appearance of circle objects.
The Fabric.js Circle class provides a rich set of features for creating interactive circles. Unlike basic HTML5 canvas circles, Fabric.js circles are movable, resizable, and highly customizable with properties for stroke, fill, dimensions, and positioning.
Syntax
fabric.Circle({
radius: number,
stroke: string,
strokeWidth: number
});
Parameters
radius ? Specifies the radius of the circle in pixels
stroke ? Defines the stroke color (CSS color values)
strokeWidth ? Sets the width of the stroke border in pixels
Basic Example
Here's how to create a circle with green stroke and 20px width:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Circle with Green Stroke</h2>
<canvas id="canvas1" width="400" height="300"></canvas>
<script>
// Initialize canvas
var canvas = new fabric.Canvas('canvas1');
// Create circle with stroke
var circle = new fabric.Circle({
top: 50,
left: 50,
radius: 70,
stroke: "green",
strokeWidth: 20,
fill: "transparent"
});
canvas.add(circle);
</script>
</body>
</html>
Advanced Example with Fill Color
This example shows a circle with both fill and stroke properties:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Circle with Fill and Stroke</h2>
<canvas id="canvas2" width="400" height="300"></canvas>
<script>
var canvas = new fabric.Canvas('canvas2');
var circle = new fabric.Circle({
top: 60,
left: 60,
radius: 70,
fill: "violet",
stroke: "blue",
strokeWidth: 15
});
canvas.add(circle);
</script>
</body>
</html>
Multiple Stroke Widths Comparison
Compare different stroke widths in a single canvas:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Stroke Width Comparison</h2>
<canvas id="canvas3" width="600" height="200"></canvas>
<script>
var canvas = new fabric.Canvas('canvas3');
// Different stroke widths
var widths = [2, 8, 15, 25];
widths.forEach(function(width, index) {
var circle = new fabric.Circle({
top: 50,
left: 50 + (index * 120),
radius: 40,
stroke: "red",
strokeWidth: width,
fill: "transparent"
});
canvas.add(circle);
});
</script>
</body>
</html>
Key Properties
| Property | Type | Description |
|---|---|---|
stroke |
String | Color of the circle border |
strokeWidth |
Number | Width of the border in pixels |
fill |
String | Interior color ("transparent" for outline only) |
Conclusion
Use the strokeWidth property to control circle border thickness in Fabric.js. Combine with stroke color and fill properties to create visually appealing interactive circles.
543 Views
