How to Create a Curve Text using CSS/Canvas ?

Last Updated : 27 Jun, 2024

Creating curved text using CSS3 or Canvas adds dynamic visual appeal to web design, offering flexible and creative ways to display headings and decorative elements along curved paths. There are several methods to curve text in web technologies. The simplest ways are by using jQuery plugins and SVG, but we won’t be explaining that here, we will learn how to create the curve text using css/canvas.

Curving Text using CSS

Curving text using CSS3 involves adjusting each letter individually, making it suitable for short text passages. Each letter is positioned to form a curved or arched shape using CSS, allowing text selection and copying.

Example: To demonstrate creating a curve text using CSS3.

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <!--Style to transform text in an arc -->
    <style type=text/css>
        /* Apply the translate and rotate transformation
           for our text to look curved  */

        .G1 {
            transform: translate(20px, 85px) rotate(-30deg);
        }

        .e1 {
            transform: translate(13px, 60px) rotate(-25deg);
        }

        .e2 {
            transform: translate(6px, 40px) rotate(-20deg);
        }

        .k1 {
            transform: translate(3px, 23px) rotate(-15deg);
        }

        .s1 {
            transform: translate(2px, 14px) rotate(-10deg);
        }

        .f {
            transform: translate(1px, 8px) rotate(-5deg);
        }

        .o {
            transform: translate(0px, 5px) rotate(0deg);
        }

        .r {
            transform: translate(-1px, 8px) rotate(5deg);
        }

        .G2 {
            transform: translate(-2px, 14px) rotate(10deg);
        }

        .e3 {
            transform: translate(-3px, 25px) rotate(15deg);
        }

        .e4 {
            transform: translate(-6px, 40px) rotate(20deg);
        }

        .k2 {
            transform: translate(-14px, 60px) rotate(25deg);
        }

        .s2 {
            transform: translate(-20px, 80px) rotate(30deg);
        }

        /* An inline-block element is placed as an inline
         element (on the same line as adjacent content), 
         but it behaves like a block element  */

        span {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div style="text-align: center; padding-top: 250px;
                font-size: 55px; color: green;">

        <!-- Declare all the characters of text 
            one-by-one, inside span tags -->
        <span class="G1">G</span>
        <span class="e1">e</span>
        <span class="e2">e</span>
        <span class="k1">k</span>
        <span class="s1">s</span>
        <span class="f">f</span>
        <span class="o">o</span>
        <span class="r">r</span>
        <span class="G2">G</span>
        <span class="e3">e</span>
        <span class="e4">e</span>
        <span class="k2">k</span>
        <span class="s2">s</span>
    </div>
</body>

</html>

Output:

Curving text using Canvas

In HTML5, the canvas element allows dynamic drawing with JavaScript. Curving text involves rotating and positioning it into an arc shape using JavaScript on the canvas. Unlike CSS, this method fills the canvas with text letters, letting you adjust the arc's radius and angle for different shapes, though the text isn't selectable.

Example: To demonstrate curving the text using canvas.

JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Curve text using Canvas</title>
</head>

<body>

    <!-- Creating a canvas element in HTML-->
    <canvas id="canv"
            width="600"
            height="250"></canvas>

    <script>

        /*The window.onload function will run as 
        soon as the window loads in the browser */
        window
        .onload = function ()
        {

            /* This method returns the html element that
                has the ID attribute with the specified
                value. */
            let canvas = document
            .getElementById("canv");

            /* This method returns a drawing context
                on the canvas, or null if the context
                identified is not supported. */
            let context = canvas
            .getContext("2d");

            /* It will change the style and appearance 
                of the text to make it look more geeky. */
            context.font = "50px serif";
            context.fillStyle = "green";
            context.textAlign = "center";

            let string = "GeeksforGeeks";

            let angle = Math.PI * 0.6; // in radians
            let radius = 200;


            context.translate(300, 300);
            context.rotate(-1 * angle / 2);

            for (let i = 0; i < string.length; i++) {

                /* It is worth noting that we are not
                    rotating the text,here the whole
                    context is being rotated and
                    translated, and the letters are just
                    filled in it. */
                context.rotate(angle / string.length);
                context.save();
                context.translate(0, -1 * radius);
                context.fillText(string[i], 0, 0);
                context.restore();
            }
        };
    </script>
</body>

</html>