- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set opacity of a text canvas using Fabric.js?
The fabric.Text object of Fabric.JS is used to opacity of a canvas-type text. Text class of Fabric.js provides the text abstraction by using the fabric.Text object, which allows us to work with text in an object-oriented way. Comparing to the canvas class, the Text class provides the rich functionality.
The text object contains the different properties, but to set the opacity of a text canvas can be done using the opacity property i.e., opacity. The opacity property of a Fabric.js Text object specifies the opacity of the text characters. It can be used to set the opacity for a text.
Syntax
The following is the syntax for the text object −
fabric.Text(text, opacity: number);
Parameter
The following two parameters are used in the fabric text object −
text − Used to specify text which needs to be written.
opacity − Specify the opacity to the text.
Steps
Follow the below-given steps to change the font-weight of a canvas-type text using Fabric.js −
Step 1 − Include the Fabric.js library in your HTML file
Step 2 − Create a new canvas element in your HTML file
Step 3 − Initialize the canvas element in your JavaScript code
Step 4 − Create a new Fabric.js Text object and set the Opacity property to the desired text value
Step 5 − The Opacity property is used to set the opacity for the specified text
Step 6 − Add the text object to the canvas
Example
Let us see how can we set the opacity of a text canvas using the fabric.js −
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Setting the Opacity of a text canvas using the Fabric.js</h2>
<p>Select the below textbox to see the controlling corners.</p>
<p>The opacity is set to 4.2</p>
<canvas id="opacitycanvas"></canvas>
<script>
var canvas = new fabric.Canvas('opacitycanvas');
var content = new fabric.Text('Welcome to Fabric.JS', {
opacity: 4.2,
left: 50,
top: 50
});
canvas.add(content);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(450);
</script>
</body>
</html>
This code will create a new text canvas element with the specified ID, create a new Fabric.js Text object and set the opacity of a canvas text using the opacity property and add the text object to the canvas. The text will appear on the canvas with an opacity.
Example
Let us see another example where we can set the opacity of a text canvas by using the opacity property, and parameters like left, top, fontSize, fontWeight, and fill.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Setting the Opacity of a text canvas using the Fabric.js</h2>
<p>Select the below textbox to see the controlling corners.</p>
<p>The opacity is set to 4.2</p>
<canvas id="myopacitycanvas"></canvas>
<script>
var canvas = new fabric.Canvas('myopacitycanvas');
var text1 = new fabric.Text('Sample Example of Opacity Property', {
left: 50,
top: 50,
fontSize:30,
fontWeight: 'italic',
fill: 'red',
opacity: 4.2
});
canvas.add(text1);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(450);
</script>
</body>
</html>
This code will create a new text canvas element with the specified ID and dimensions, create a new Fabric.js Text object and set the opacity of a text canvas using opacity property, and add the text object to the canvas. The text will appear on the canvas with a dimensions as we defined in the example.
Conclusion
In this article, we have demonstrated how to set the opacity of a text canvas along with examples. We have seen the two different examples here. In the first example, we used the ‘opacity’ property for setting the opacity of a text. For the second example, we used the opacity property and various dimensions or the parameters like left, top, fill, fontSize, and fontWeight for setting the opacity of a text canvas.
127 Views
