FabricJS – How to remove the current object shadow in a cloned image?

In this tutorial, we are going to learn how to remove the current object shadow in a cloned 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 remove the current object shadow in a cloned image, we use the withoutShadow property.

Syntax

cloneAsImage( callback: function, { withoutShadow: Boolean }: Object): fabric.Object

Parameters

  • callback (optional) − This parameter is a function which is to be invoked with a cloned image instance as the first argument.

  • options (optional) − This parameter is an optional Object which provides additional customizations to our clone image. Using this parameter we can set a multiplier, crop the clone image, remove the current object transform or a lot of other properties can be changed of which withoutShadow is a property.

Options Keys

  • withoutShadow − This property accepts a Boolean value which determines whether the current object shadow is to be removed or not. This property is optional.

Using the withoutShadow property and passing it a ‘true’ value

Example

Let’s see a code example of how the cloned Image object appears when the withoutShadow property is used and a ‘true’ value is passed to it. Here, the image object already has the shadow property assigned to it. However since we are passing a ‘true’ value to withoutShadow property, that object shadow will be removed and our clone image will no longer possess a shadow.

<!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>Using the withoutShadow property and passing it a ‘true’ value</h2>
   <p>You can see that clone image does not have a shadow</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "black",
         blur: 12,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20, 
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(
         function (Img) {
            Img.set("top", 150);
            Img.set("left", 150);
            canvas.add(Img);
         },
         {
            withoutShadow: true,
         }
      );
   </script>
</body>
</html>

Using the withoutShadow property and passing it a ‘false’ value

Example

In this example, we have used the withoutShadow property and passed it a ‘false’ value. Thus the shadow from our clone object will not be removed.

<!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>Using the withoutShadow property and passing it a ‘false’ value</h2>
   <p>You can see that clone image contains a shadow</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "black",
         blur: 12,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(
         function (Img) {
            Img.set("top", 150);
            Img.set("left", 150);
            canvas.add(Img);
         },
         {
            withoutShadow: false,
         }
      );
   </script>
</body>
</html>

Updated on: 27-Oct-2022

277 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements