How to create a Circle with border colour using FabricJS?

FabricJSJavascriptHTML5 Canvas

In this tutorial, we are going to create a Circle with border colour 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. Since FabricJS is extremely flexible, we are allowed to customize our circle object in any way we like. One of the properties that FabricJS provides is borderColor which allows us to manipulate the colour of the border when our object is active.

Syntax

new fabric.Circle({ borderColor: 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 borderColor is a property.

Options Keys

  • borderColor − This property accepts a String which determines the colour of the border when our object is actively selected. Its default value is rgb(178,204,255).

Example 1

Passing borderColour key with a String value

Let's see a code example of how we can assign a value to the borderColor property. We have assigned the value "blue" to the borderColor key which helps to create the blue border on selection of our circle object.

<!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>Creating a circle with border colour using FabricJS</h2>
      <p>Select the object and observe the blue outline of the selection area. Here we have applied the <b>borderColor</b> property and assigned it 'blue' color. </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,
            radius: 50,
            fill: "red",
            borderColor: "blue",
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing a rgba value to the borderColor key

Instead of passing simple colour names as a String, we can also use RGBA values, whose components specify the amount of Red, Blue, Green and Alpha, where alpha denotes the opacity. In this example we have used rgb(128,0,128) which is the rgb value for the colour purple.

<!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>Creating a circle with border colour using FabricJS</h2>
      <p>Select the object and notice the purple outline of the selection area. Here we have applied the <b>borderColor</b> property and assigned it an 'rgb' 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,
            radius: 50,
            fill: "red",
            borderColor: "rgb(128,0,128)",
         });

         // Adding it to the canvas
         canvas.add(cir);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
raja
Updated on 25-May-2022 07:48:26

Advertisements