How to Create a Curve Text using CSS3/Canvas ? - GeeksforGeeks

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:
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
How to apply style to parent if it has child with CSS?
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)