How to change corner style of a canvas-type text using Fabric.js ?
Last Updated :
27 Jun, 2024
In Fabric.js, altering the corner style of canvas-type text is a practical way to customize text rendering. By adjusting parameters like corner radius and corner style, developers can achieve different visual effects, enhancing the overall design of text elements on the canvas. This functionality allows for flexibility in creating distinct text presentations tailored to specific design requirements or aesthetic preferences within web applications which are as follows:
Syntax:
fabric.Text(text, cornerStyle: string);
Parameters: This function accepts two parameters as mentioned above and described below:
- text: It specifies the text to be written.
- corner style: It specifies the corner style which can be 'rect' or 'circle' where 'rect' is the default style.
Custom Corner Style of Canvas
The code initializes a Fabric.js canvas and creates a text object with customized corner styles. The cornerStyle property of the text object is set to 'round', altering the appearance of the control corners from the default rectangular shape to a rounded shape, before adding the text to the canvas.
Example: To demonstrate using FabricJS to change corner style of canvas-like text.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to change corner style of a
canvas-type text with JavaScript?
</title>
<!-- Loading the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<canvas id="canvas" width="600" height="200" style="border:1px solid #000000;">
</canvas>
<script>
// Create a new instance of Canvas
var canvas = new fabric.Canvas("canvas");
// Create a new Textbox instance
var text = new fabric.Text('GeeksforGeeks', {
cornerStyle: 'circle'
});
// Render the Textbox on Canvas
canvas.add(text);
</script>
</body>
</html>
Output:
Dafault Corner Style of Canvas
In this example code, the default corner style of the Fabric.js canvas-type text is set to circle using the cornerStyle property when creating a new fabric.Text instance. This changes the shape of the control corners from the default rectangular style to circular, affecting how the corners appear on the text object rendered on the canvas.
Example: To demonstrate changing corner style of a canvas-type using the FabricJS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Corner Style of Canvas-Type Text using Fabric.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
<h1>Change Corner Style of Canvas-Type Text using Fabric.js</h1>
<canvas id="canvas" width="400" height="200" style="border: 1px solid #000;"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
// Create text object with
// customized corner style
var text = new fabric.Text('Hello Fabric.js!', {
left: 50,
top: 50,
cornerStyle: 'round'
// Options: 'rect', 'round'
});
canvas.add(text);
</script>
</body>
</html>
Output:
Output
Similar Reads
How to change background color of canvas-type text using Fabric.js ? In this article, we are going to see how to change the background color of the canvas-like text using FabricJS. The canvas means text written is movable, rotatable, resizable, and can be stretched. But in this article, we will change the background color. Further, the text itself cannot be edited li
2 min read
How to change the font style of a text canvas using Fabric.js ? In this article, we are going to see how to change the font style of a text canvas using FabricJS. The canvas means text written is movable and can be stretched according to the requirement. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we are going to use a
2 min read
How to change border-color of a canvas text using Fabric.js ? In this article, we are going to see how to change the border-color of a canvas-like text using FabricJS. The canvas means text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we are going to use
2 min read
How to remove borders of a canvas-type text using Fabric.js ? In this article, we are going to see how to remove the borders of a canvas-like text using FabricJS. The canvas means text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we are going to use a Ja
2 min read
How to set opacity of a text canvas using Fabric.js ? In this article, we are going to see how to set the opacity of a canvas-like text using FabricJS. The canvas means text written is movable, rotatable, resizable and can be stretched. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we are going to use a JavaScri
2 min read