How to Create a Curve Text using CSS3/Canvas ?

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 stick to the question and elucidate how to curve text using CSS3 and canvas. Let’s get started.

Curving Text using CSS3: This method is extremely grueling for curving long text because you have to apply proper positioning and alignment to every character of the text separately. But, for small text it just gets the job done. Here we just write the characters of a text one by one and start applying the CSS transform properties to make the whole text look curved (or shaped like an arc). However, one advantage of this method is that you can select the text and even perform copy-paste.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Curving text using Canvas: The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. This is a relatively easier method to curve text using a bit of JavaScript for manipulating the canvas element and styling it. This method makes use of basic high school mathematics to rotate and translate the canvas context within a loop and fill it with the letters of text one-by-one. The radius of the arc and the angle could be adjusted for the shape and size of the arc. This method will produce a non-selectable instance of the text.



Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.