How to remove current object shadow from URL string of IText object using FabricJS?

In this tutorial, we will learn how to remove the current object shadow from the URL string of an IText object using FabricJS. The IText class was introduced in FabricJS version 1.4, which extends Fabric.Text and is used to create IText instances. IText instances give us the freedom to select, cut, paste or add new text without additional configuration. There are also various supported key combinations and mouse/touch combinations to make text interactive that are not available in Text.

However, IText-based Textbox allows us to resize the text rectangle and wrap it automatically. This is not the case for IText, as the height does not adjust based on line breaks. We can manipulate IText objects by using various properties. Likewise, we can use the withoutShadow property to remove the current object's shadow from the IText object's URL string.

grammar

toDataURL({ withoutShadow: Boolean }: Object): String

parameter

• Options (optional)- This parameter is anobjectthat provides additional customization for the URL representation of the IText object. Use this parameter to change height, quality, format, and many other properties, of which withoutShadow is a property.

Option key

• withoutShadow- This property accepts aBooleanvalue which allows us to get rid of the shadow of the current object.

Example 1

Use the withoutShadow attribute and pass it a false value

Let's look at a code example to see the output image when passing a false value to the withoutShadow property. Once we open the console from the development tools, we can see the URL representation of the IText object. We can copy the URL and paste it into the address bar of a new tab to see the final output. In this example, we pass the Shadow property to the IText object. Since we also passed a false value to the withoutShadow property, our final output image will still contain a shadow.

     
  
Using the withoutShadow property and passing it a false value
 
 You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the final image contains a shadow 
    

Example 2

Use the withoutShadow attribute and pass it a true value

Let's look at a code example to see what the final output image of an IText object looks like when using the withoutShadow property and passing a true value to it. In this case, our final output image will not contain any shadows.

     
  
Using the withoutShadow property and passing it a true value
 
 You can open console from dev tools and see the output URL. You can copy that and paste it in the address bar of a new tab to see that the final image does not contain a shadow 
    

The above is the detailed content of How to remove current object shadow from URL string of IText object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!