How to Create a Curve Text using CSS3/Canvas ?

Last Updated : 31 May, 2020

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:

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

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

Output:

Suggest improvement

How to switch between multiple CSS stylesheets using JavaScript ?

How to create a string by joining the array elements using PHP ?

Share your thoughts in the comments

How to Create a Curve Text using CSS3/Canvas ?

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?