How to hide the controlling borders of a Circle using FabricJS?

FabricJSJavascriptHTML5 Canvas

In this tutorial, we are going to learn how to hide the controlling borders of a Circle 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. We can customize our controlling borders in many ways such as adding a specific colour to it, a dash pattern etc. However, we can also eliminate the borders completely by using the hasBorders property.

Syntax

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

Options Keys

  • hasBorders − This property accepts a Boolean value which when set to False, the controlling borders will not be rendered. The default value is True.

Example 1

Default appearance of controlling borders of a Circle object

Let's see a code that shows the default appearance of controlling borders of a Circle. Since the default value of hasBorders property is True, the borders are rendered on selecting the 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>Hiding the controlling borders of a circle using FabricJS</h2>
      <p>Select the object and notice its controlling borders. This is the default appearance. Although we have not used the <b>hasBorders</b> property, it is by default set to True.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5
         });

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

Example 2

Passing hasBorders as key and assigning a "false" value to it

If the hasBorders property is assigned a False value, the borders will no longer be rendered. This means that when we select our circle object, the controlling borders will be hidden.

<!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>Hiding the controlling borders of a circle using FabricJS</h2>
      <p>Select the object and now you will no longer be able to see its controlling borders, as we have set <b>hasBorders</b> as False.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 215,
            top: 100,
            fill: "white",
            radius: 50,
            stroke: "#c154c1",
            strokeWidth: 5,
            hasBorders: false
         });

         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
raja
Updated on 25-May-2022 09:04:54

Advertisements