FabricJS to setting the Background Colour on Selection of Circle

In this tutorial, we are going to learn how to set the background colour of selection of a Circle 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. We can change an object's dimensions, rotate it or manipulate it when the circle is actively selected. We can change the background colour of selection of Circle by using the selectionBackgroundColor property.

Syntax

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

Options Keys

selectionBackgroundColor − This property accepts a String which determines the background colour of the selection.

Example 1

Default colour when selectionBackgroundColor property is not used

Let's see a code to understand how the selection appears when the selectionBackgroundColor property is not used. As we can see from this example, the selection area or the area behind the object has no 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>Setting the Background Colour on selection of circle</h2>
      <p>Select the object and notice the selection area. Here we have not used the <b>selectionBackgroundColor</b> property.</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 selectionBackgroundColor property as key

In this example, we are assigning a value to the selectionBackgroundColor property. In this case, we have passed it the "skyBlue" colour and hence the selection area appears to be of sky blue 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>Setting the Background Colour on selection of circle</h2>
      <p>Select the object to see the background color of the selection area. Here we have used the <b>selectionBackgroundColor</b> property and assigned it 'skyBlue' color. </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",
            selectionBackgroundColor: "skyBlue"
         });
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>