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 change border-color of a canvas text using Fabric.js?
The fabric.Text object of Fabric.JS is used to change the corner style 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 change the border color of a text canvas can be done using one of the color property i.e., borderColor. The borderColor property of a Fabric.js Text object specifies the border color of the object. Any valid CSS color value for the border color can be used. You can also use the setBorderColor() changes border color of the text object.
Syntax
The following is the syntax for the text object −
fabric.Text(text, borderColor: string);
Parameter
text − Used to specify which text must be write
borderColor − Specify the border color
Steps
Follow the below-given steps to change the border-color of a canvas-type text using Fabric.js −
Step 1 − First, we include the Fabric.js library in the HTML file and add the script tag to the head of the document.
Step 2 − Next, lets create a canvas element for the html document body
Step 3 − Then, we add a script tag to the body of the document to initialize a new fabric.Canvas object and create a fabric.Text object
Step 4 − Finally, we add the text object to the canvas and set the border color to the desired color using the set method and the borderColor property
Step 5 − Add the Text object to the canvas
Example
In this example, we are going to learn how we can change the border-color of a canvas text using the borderColor property −
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Changing the border-color of a canvas text using Fabric.js</h2>
<p>Select the textbox to see that the controlling corners</p>
<canvas id="idCanvas" width="400" height="200"></canvas>
<script>
// Initializing the canvas element
var canvas = new fabric.Canvas('idCanvas');
// Create a instance of fabric.Text class
var content = new fabric.Text('Welcome to Tutorials Toint', {
left: 100,
top: 100,
fontSize: 30,
fill: '#000000',
stroke: '#ff0000',
strokeWidth: 2,
borderColor: '#ff0000'
});
// Add the text object to the canvas
canvas.add(content);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
The borderColor property of the fabric.Text object controls the color of the border around the text. In this example, the border color is set to red using the hexadecimal color code #ff0000.
Example
Let us see another example, where we used the set( ) of borderColor property for changing the border color of a text canvas.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
<h2>Changing the border-color of a canvas text using Fabric.js</h2>
<p>Select the textbox to see that the controlling corners</p>
<canvas id="idCanvas" width="500" height="200"></canvas>
<script>
var canvas = new fabric.Canvas('idCanvas');
var contenttext = new fabric.Text('Welcome To Tutorials Point', {
left: 100,
top: 100,
fontSize: 30,
fill: '#000000',
stroke: '#ff0000',
strokeWidth: 2
});
canvas.add(contenttext);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
text.set({ borderColor: '#00ff00' });
canvas.renderAll();
</script>
</body>
</html>
In this example, we use the set method of the fabric.Text object to change the borderColor property to green. We then call the renderAll method of the fabric.Canvas object to re-render the canvas and update the text object with the new border color.
Conclusion
In this article, we have demonstrated how to change the border-color of a canvas-type text along with examples. We have seen the two different examples here, In the first example, we used the borderColor property for changing the border-color of a canvas text to red. For the second example, we used the used the set( ) of borderColor property for changing the border color of a text canvas.
296 Views
