How to change background color of a canvas circle using Fabric.js ?

FabricJS Javascript Library Front End Technology

The Circle class of Fabric.js which 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.

Here, we are using the backgroundColor property of Circle object for changing the background color of a canvas circle. We can change the background color by defining the value for the property.

Syntax

The following is the syntax for the Circle −

fabric.Circle({
   radius: number,
   backgroundColor: string,
   fill: string,
   stroke: string,
   strokewidth: int
});

Parameters

radius − It is used to specify the radius of a circle
fill − It is used to specify the fill color
stroke − It is used to specify the stroke color
strokeWidth − It is used to specify width of the stroke
radius − It is used to specify the radius
backgroundColor − Specify the color of the background

Example

In this example, we will initialize the instances of circle and canvas and it helps to change the color of the background for circle using the property of backgroundColor and renders the Circle on the Canvas.

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the background color of a canvas circle</h2>
      <p>Select the textbox to see that the controlling corners.</p>
      <p>Background color of Canvas Circle is changed to "yellow".</p>
      <canvas id="canvas" width="550" height="450" ></canvas>
      <script>
         var canvas = new fabric.Canvas("canvas");
         var round = new fabric.Circle({
            top: 50,
            left: 50,
            radius: 80,
            backgroundColor: 'yellow'
         });
         canvas.add(round);
      </script>
   </body>
</html>

As we see in the example, here we used the Circle class of Fabric.js which is used to provide the circle shape by using the fabric.Circle object. Here, we changed the color of background for a canvas circle to yellow.

Let us take another example, where we are going to learn how can we change the background color of a canvas circle which has the color for its body and outline.

Example

We will initialize the instances of Canvas and Circle, and it helps to change the color of background for the circle using the property of backgroundColor and renders the Canvas Circle. Under the Circle class object we define the properties like fill, stroke, strokeWidth, left, top, radius, and backgroundColor which gives the color for the circle body and outline.

<html>
   <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
   </head>
   <body>
      <h2>Changing the background color of a canvas circle</h2>
      <p>Select the textbox to see that the controlling corners.</p>
      <p>Background color of Canvas Circle is changed to "green".</p>
      <canvas id="canvas" width="600" height="300" style="border:1px solid #00008B"></canvas>
      <script>
         var canvas = new fabric.Canvas("canvas");
         var round1 = new fabric.Circle({
            radius: 80,
            left: 180,
            top: 80,
            fill: "#70daeb",
            stroke: "#00b7eb",
            strokeWidth: 2,
            backgroundColor: 'green'
         });
         canvas.add(round1);
      </script>
   </body>
</html>

Conclusion

In this article, We have seen the two different examples here, in the first example, we used the Circle class backgroundColor property for changing the background color of a circle to yellow.

In the second example, we used the Circle class and its properties like radius, backgroundColor, fill, top, left, stroke, and strokeWidth to change the color of background of a circle and also the color of the body and outline of a circle.