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 corner style of a canvas-type 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 style of corner and rendering the text of canvas can be done using one of the style property i.e., cornerStyle. If the cornerStyle is default then it returns rect, otherwise the value is defined as a circle for the property.
Fabric.js is one of the most powerful and simple HTML 5 canvas libraries, which is fast, and feature-rich. The circles, rectangles, ellipses, and polygons contain hundreds or more than that simple paths. For that, we can do the move, scale, and these objects can be rotated with the mouse help, and properties like transparency, color, and z-index etc., can be modified by us.
Syntax
The following is the syntax for the text −
fabric.Text(text, cornerStyle: string);
Parameters
text − It is used to specify the text which is to be written
cornerStyle − It is used to specify the cornerStyle which is the rect and circle. By default the corner style is rect.
Example 1
In this example, we need to import the Fabric.js library using the CDN which is used to create block of canvas in our body tag of HTML document and it contains the text. Now we will initializing the instances of Canvas and Text which are provided by the Fabric.js library and it helps to change the style of corner the text using the cornerStyle property and renders the Text on the Canvas. Here we define the value as a circle for the property.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
<h2>Changing the corner style of a canvas-type text</h2>
<p>Select the textbox to see that the controlling corners.</p>
<p>Corner style is changed to "circle".</p>
<canvas id="canvas" width="300" height="200"></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
var mytext = new fabric.Text('Welcome to Tutorials Point', {
cornerStyle: 'circle',
top: 50,
left: 50,
});
canvas.add(mytext);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(350);
</script>
</body>
</html>
Let us take another example, where we define the corner style as a default for canvas-type text using the Fabric.js
Example 2
In the below example, we will initialize the instances of Canvas and Text which are provided by the Fabric.js library and it helps to change the style of corner for the text using the cornerStyle property and renders the Text on the Canvas. Here we define the property as a default which represents the rect.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
<h2>Changing the corner style of a canvas-type text</h2>
<p>Select the textbox to see that the controlling corners.</p>
<p>Corner style is changed to "rect".</p>
<canvas id="canvas" width="250" height="350"></canvas>
<script>
var canvas = new fabric.Canvas("canvas");
var content = new fabric.Text('Welcome to Tutorials Point', {
cornerStyle: 'rect',
top: 50,
left: 50,
});
canvas.add(content);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
Conclusion
In this article, we have demonstrated how can we change style of corner for a canvas-type text along with the examples. We have seen the two different examples here, in the first example, we used the text class and corner style property event for changing the style of corner for a canvas-type text by defining the corner style as a circle. In the second example, we used the text class and corner style property event for changing the style of corner for a canvas-type text by defining the corner style as a rect which is a default value of the corner style.
284 Views
