How to set stroke width of a canvas circle using Fabric.js ?

FabricJS Javascript Front End Technology

The stroke and strokeWidth property is used to set the stroke color and strokeWidth of a canvas circle. The Circle Class contains the different properties, but to set the stroke color and width we use the stroke and strokeWidth property. The strokeWidth property is used to specify the width for the circle of canvas.

The Fabric.js Circle class is used to provide the circle shape by using the fabric.Circle object. The Circle object is used to provide the circle shape, and the circle is movable, and it can be stretched according to the requirements. For the stroke, color, width, height, and fill color the Circle is customizable. Comparing to the canvas class the Circle class provides the rich functionality.

Syntax

The following is the syntax for the text object −

fabric.Circle({
   radius: number,
   stroke: string,
   strokeWidth: number
});

Parameter

radius − Used to specify radius of the circle

stroke − Specify the color of the stroke.

strokeWidth − Used to specify the width of the stroke

Steps

Follow the below-given steps to set the horizontal skew of a canvas circle using Fabric.js −

Step 1 − Include the Fabric.js library in your HTML file

Step 2 − Creating a new canvas element in your HTML file

Step 3 − Initializing the canvas element in your code of JavaScript

Step 4 − Create a new Fabric.js Circle Class object and set the skewX property to the desired circle value

Step 5 − Adding the circle object to the canvas

Example

Let us see how can we set the stroke color and strokeWidth of a canvas circle using Fabric.js −

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: green, stoke width: 20</p>
      <canvas id="strokecanvas"></canvas>
      <script>
         // Initiating a canvas instance
         var canvas = new fabric.Canvas('strokecanvas'); 
       
         // Create a instance of fabric.Circle Class
         var circle6 = new fabric.Circle({
            top: 50,
            left: 50,
            radius: 70,
            stroke: "green",
            strokeWidth: 20
         }); 
         
         // Adding the Canvas
         canvas.add(circle6);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(350);
      </script> 
   </body> 
</html>

This code will create a new canvas circle element with the specified ID, create a new Fabric.js Circle Class object and set the stroke color and strokeWidth for the circle using the stroke and strokeWidth property and add the circle object to the canvas. The circle will appear on the canvas with a horizontal skew.

Example

Let us see another example where we can set the stroke color and strokeWidth of a canvas circle by using the stroke and strokeWidth method, and properties like left, top, fill, radius.

<html>
   <head> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
   </head>
   <body>
      <h2>Setting the Stroke Color and Stroke Width of a Canvas Circle</h2>
      <p>Please click on the canvas circle to see the controlling corners.</p>
      <p>Strke color: blue, stoke width: 20</p>
      <canvas id="canvasstroke"></canvas>

      <script>
         var canvas = new fabric.Canvas('canvasstroke'); 
         var circle5 = new fabric.Circle({
            top: 60,
            left: 60,
            fill: "violet",
            radius: 70,
            stroke: "blue",
            strokeWidth: 20
         }); 
         
         canvas.add(circle5);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(500);
      </script> 
   </body> 
</html>

This code will create a new canvas circle element with the specified ID and dimensions, create a new Fabric.js Circle Class object and set the canvas circle to stroke color and stroke width using strokeWidth property, and add the class object to the canvas. The circle will appear on the canvas with a dimensions as we defined in the example.

Conclusion

In this article, we have demonstrated how to set the stroke width and stroke color of a canvas circle along with examples. We have seen the two different examples here, we used the stroke and strokeWidth property for setting the stroke width and color of a circle canvas. In the first example, we used the ‘stroke’, and ‘strokeWidth’ property for setting the color and width of a canvas circle. For the second example, we used the stroke and strokeWidth property method and various dimensions’ parameters like left, top, fill etc., for setting the width and color stroke for a circle canvas.