How to create a Circle with a background colour using FabricJS?


In this tutorial, we are going to create a Circle with background colour 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. The backgroundColor property allows us to assign a colour to our object's background. It is the colour of the container (where the circle lives) which is square in shape.

Syntax

new fabric.Circle({ backgroundColor: String }: Object)

Parameters

  • options (optional) − This parameter is an Object which provides additional customizations to our object. Using this parameter, properties such as colour, cursor, stroke width and a lot of other properties can be changed related to the Circle of which backgroundColor is a property.

Options Keys

  • backgroundColor − This property accepts a String which determines the colour of our object's background. The value can be a hexadecimal value, an rgba value or simply the name of the colour which we want our background colour to be.

Example 1

Passing backgroundColor property as key with a hexadecimal value

Let's see an example to assign a background colour to our circle object using hexadecimal value of colour. In this example, we have used the Hex colour code #d0db61 which is a dark-khaki colour.

<!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 a background colour using FabricJS</h2>
      <p>Notice the dark-khaki background around the circle. It appears as we have applied the <b>backgroundColor</b> property and assigned it a Hex color code. </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: "#74c365",
            stroke: "#00b7eb",
            strokeWidth: 2,
            backgroundColor: "#d0db61",
         });

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

Example 2

Passing backgroundColor property as key with a rgba value

We can use an RGBA (red, blue, green, and alpha) value instead of a hexadecimal colour code. The alpha parameter specifies the opacity of a colour. In this example, we have used the rgba value (255,0,0,0.7) which is the colour red with 0.7 opacity.

<!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 a background colour using FabricJS</h2>
      <p>Notice the orange-red background around the circle. Here we have used the <b>backgroundColor</b> property and assigned it an 'rgba' 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: "green",
            stroke: "blue",
            strokeWidth: 2,
            backgroundColor: "rgba(255,0,0,0.7)",
         });

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

Updated on: 25-May-2022

140 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements