Open In App

How to change border-color of a canvas text using Fabric.js ?

Last Updated : 11 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 a JavaScript library called FabricJS. After importing the library using CDN, we will create a canvas block in the body tag which will contain our text. After this, we will initialize instances of Canvas and Text provided by FabricJS and use the borderColor property to add color to the text borders and render the Canvas on the Text as given in the example below. Further, remember that you have to click on the text to see the border of the text.
Syntax: 
 

 fabric.Text(text, borderColor: String); 

Parameters: This function accepts two parameters as mentioned above and described below: 
 

  • text: It specifies the text to be written.
  • borderColor: It specifies the color of the border.

Program: This example uses FabricJS to change border-color of canvas-like text.
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        change border-color of a canvas-type text
    </title>
 
    <!-- Loading the FabricJS library -->
    <script src=
    </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', {
            borderColor: 'red',
        });
 
        // Render the Textbox on Canvas
        canvas.add(text);
    </script>
</body>
 
</html>


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 like a textbox.Approach: To make it possible, we are
2 min read
How to change background color of a canvas circle using Fabric.js ?
In this article, we are going to see how to change the background color of a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width, or radius. Approach: To make it possible we are going
2 min read
How to change selection background color of a canvas circle using Fabric.js ?
In this article, we are going to see how to change the selection background color of a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width or radius. Approach: To make it possible, we
2 min read
How to change font-family of a text canvas using Fabric.js ?
In this article, we are going to see how to change the font-family of a text canvas 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.To make it possible we are going to use a JavaScript library called FabricJS. After importing the library
2 min read
How to change character spacing of text canvas using Fabric.js ?
In this article, we are going to see how to change the character spacing 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 this possible, we are going to use a JavaScript library called FabricJS. Afte
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 JavaScript library called FabricJS. After importin
2 min read
How to change the font size of a text canvas using Fabric.js ?
In this article, we are going to see how to change the font size of a text canvas using FabricJS. The text 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 JavaScript library called FabricJS. After importi
2 min read
How to change corner style of a canvas-type text using Fabric.js ?
In this article, we are going to see how to change the corner style of a canvas-like text in JavaScript. The canvas means text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox. The corners of the text are the points from where text can be resized.Approach: To make it possible
2 min read
How to change font-weight of a canvas-type text using Fabric.js ?
In this article, we are going to see how to change the font-weight 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 it this possible we are going to use a JavaScript library called FabricJS. After import
2 min read
How to scale controlling border of a canvas circle using Fabric.js ?
In this article, we are going to see how to scale controlling border of a canvas circle using FabricJS. The canvas means the circle is movable and can be stretched according to requirement. Further, the circle can be customized when it comes to initial stroke color, fill color, stroke width or radius. Approach: To make it possible we are going to u
2 min read