Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set Scale Factor Border of a Circle Using Fabric.js
In this tutorial, we are going to set the scale factor (border) of Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we have to create an instance of fabric.Circle class and add it to the canvas. We can use the borderScaleFactor property which specifies the scale factor of objects controlling borders.
Syntax
new fabric.Circle({ borderScaleFactor: Number }: 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 borderScaleFactor is a property.
Options Keys
borderScaleFactor − This property accepts a Number which specifies the border thickness. The default value is 1.
Example 1
Default behaviour of borderScaleFactor property
Let's see an example that depicts the default behaviour of the borderScaleFactor property. Although we have specified it in this example, by default, the value that borderScaleFactor uses even when unspecified is 1.
<!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 scale factor (border) of circle using FabricJS</h2>
<p>Select the object and notice its border. Here we have set <b>borderScaleFactor</b> at 1, which is the default value. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var cir = new fabric.Circle({
left: 215,
top: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
borderScaleFactor: 1
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2
Passing borderScaleFactor as key
Let's see a code to increase the border thickness of the circle object when it is actively selected. In this example we have assigned the borderScaleFactor a value of 5, which specifies the thickness of our border.
<!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 scale factor (border) of a circle using FabricJS</h2>
<p>Select the object and notice the thickness of its border. Here we have set the <b>borderScaleFactor</b> at 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: 100,
fill: "white",
radius: 50,
stroke: "#c154c1",
strokeWidth: 5,
borderColor: "#966fd6",
borderScaleFactor: 5
});
// Adding it to the canvas
canvas.add(cir);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
228 Views
