FabricJS – How to set the background colour of selection of an Image?

In this tutorial, we are going to learn how to set the background colour of selection of Image using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity etc. In order to set the background colour of Image, we use the selectionBackgroundColor property.

Syntax

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { selectionBackgroundColor: String }: Object, callback: function)

Parameters

element − This parameter accepts HTMLImageElement, HTMLCanvasElement, HTMLVideoElement or String which denotes the image element. The String should be a URL and would be loaded as an image.
options (optional) − This parameter is an Object which provides additional customizations to our object. Using this parameter origin, stroke width and a lot of other properties can be changed related to the image object of which selectionBackgroundColor is a property.
callback (optional) − This parameter is a function which is to be called after eventual filters are applied.

Options Keys

selectionBackgroundColor − This property accepts a String value. The value that is assigned will determine the background colour of the selection.

Default colour when selectionBackgroundColor property is not used

Example

Let’s see a code example 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>Default colour when selectionBackgroundColor property is not used</h2>
   <p>
      You can select the image object to see that the selection area has no colour
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Passing selectionBackgroundColor property as key

Example

In this example, we are assigning a value to the selectionBackgroundColor property. In this case, we have passed it the hexadecimal value “#e0ffff” which is a light cyan colour and hence the selection area appears to be of that 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>Passing selectionBackgroundColor property as key</h2>
   <p>
      You can select the image object to see that the selection area has a light cyan colour
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 50,
         selectionBackgroundColor: "#e0ffff",
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>