How to add underline to canvas-type text using Fabric.js ?

Last Updated : 24 Jun, 2024

Enhancing text presentation on web canvases using Fabric.js involves various techniques, such as adding underlines for improved visual clarity and emphasis. These methods enable developers to customize text elements effectively, contributing to enhanced user experience and design flexibility in web applications.

Approach To Add Underline to Canvas:

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 underline property to add underline and render the Canvas on the Text as given in the example below.

Syntax:

 fabric.text(text :string, underline: boolean);

Parameters:

This function accepts two parameters which are described as follows:

text: It specifies the text.
underline: It specifies whether to add underline or not.

Example: To demonstrate adding underline to the canvas-type text using the FabricJs.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to add underline to canvas-type
        text using Fabric.js ?
    </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 Text instance
        var text = new fabric
        .Text('GeeksforGeeks',
        {
            underline: true
        });

        // Render the text on Canvas
        canvas.add(text);
    </script>
</body>

</html>