Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove current object shadow in the URL string of IText object using FabricJS?
In this tutorial, we are going to learn about how to remove current object shadow in the URL string of IText object using FabricJS. The IText class was introduced in FabricJS version 1.4, extends fabric.Text and is used to create IText instances. An IText instance gives us the freedom to select, cut, paste or add new text without additional configurations. There are also various supported key combinations and mouse/touch combinations which make text interactive which are not provided in Text.
Textbox, however, which is based on IText allows us to resize the text rectangle and wraps lines automatically. This is not true for IText as height is not adjusted based on the wrapping of lines. We can manipulate our IText object by using various properties. Likewise, we can remove current object shadow in the URL string of IText object by using the withoutShadow property.
Syntax
toDataURL({ withoutShadow: Boolean }: Object): String
Parameters
options (optional) ? This parameter is an Object which provides additional customizations to the URL representation of the IText object. Using this parameter height, quality, format and a lot of other properties can be changed of which withoutShadow is a property.
Options Keys
withoutShadow ? This property accepts a Boolean value which allows us to get rid of the current object shadow.
Example 1: Using the withoutShadow property and passing it a false value
Let's see a code example to see the output image when the withoutShadow property is passed a false value. As soon as we open the console from the dev tools, we can see the URL representation of the IText object. We can copy that URL and paste it into the address bar of a new tab to see the final output. In this example, we have passed the IText object the shadow property. Since we have also passed the withoutShadow property a false value, our final output image will still contain the 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 false value</h2>
<p> 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 </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a shadow object
var shadow = new fabric.Shadow({
blur: 25,
color: "grey",
offsetX: 12,
offsetY: 15,
});
// Initiate an itext object
var itext = new fabric.IText(
"Add sample text here.\nLorem ipsum dolor sit amet \nconsectetur adipiscing.",{
width: 300,
left: 50,
top: 70,
fill: "#c70039",
backgroundColor: "#c1dfed",
stroke: "#c70039",
originX: "center",
shadow: shadow,
}
);
// Add it to the canvas
canvas.add(itext);
// Using the toDataURL method
console.log(itext.toDataURL({ withoutShadow: false }));
</script>
</body>
</html>
Example 2: Using the withoutShadow property and passing it a true value
Let's see a code example to see how the final output image of the IText object looks like when the withoutShadow property is used and a true value is passed to it. In this case, our final output image will not contain any 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 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 </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a shadow object
var shadow = new fabric.Shadow({
blur: 25,
color: "grey",
offsetX: 12,
offsetY: 15,
});
// Initiate an itext object
var itext = new fabric.IText(
"Add sample text here.\nLorem ipsum dolor sit amet \nconsectetur adipiscing.",{
width: 300,
left: 50,
top: 70,
fill: "#c70039",
backgroundColor: "#c1dfed",
stroke: "#c70039",
originX: "center",
shadow: shadow,
}
);
// Add it to the canvas
canvas.add(itext);
// Using the toDataURL method
console.log(itext.toDataURL({ withoutShadow: true }));
</script>
</body>
</html>
Comparison
| withoutShadow Value | Shadow in Output | Use Case |
|---|---|---|
false |
Yes | Keep shadow effects in exported image |
true |
No | Export clean image without shadow |
Conclusion
The withoutShadow property in FabricJS allows you to control whether shadows are included in the data URL output. Set it to true to remove shadows from exported images, or false to preserve them.
284 Views
