How to set the padding of a Circle using FabricJS?

FabricJSJavascriptHTML5 Canvas

In this tutorial, we are going to learn how to set the padding of a Circle using FabricJS. Circle is one of the various shapes provided by FabricJS. In order to create a circle, we will have to create an instance of fabric.Circle class and add it to the canvas. Just as we can specify the position, colour, opacity and dimension of a circle object in the canvas, we can also set the padding of a circle object. This can be done by using the padding property.

Syntax

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

Options Keys

  • padding − This property accepts a Number value. The value that is assigned, determines the distance between the circle object and its controlling borders.

Example 1

Default appearance when padding is not used

Let's see a code that displays the appearance of our circle object when the padding property is not used. As we can see, there is no space between the object and its surrounding controlling borders. This means that there is zero padding between the circle and its controlling borders.

<!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 padding of circle using FabricJS</h2>
      <p>Select the object and observe that there is no space between the object and its surrounding controlling borders. This is the default behavior. We haven't used any <b>padding</b> here. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>

Example 2

Passing padding property as key

In this example, we are passing the padding property as key with a value 7. This indicates that there will be a 7px distance between the circle object and all of its controlling borders.

<!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 padding of circle using FabricJS</h2>
      <p>Select the object and notice the padding between the object and its controlling border. Here we have set the <b>padding</b> at 10px.</p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            padding: 10,
            radius: 50,
            fill: "#85bb65"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
raja
Updated on 27-May-2022 07:21:48

Advertisements