Open In App

How to Create a Curve Text using CSS3/Canvas ?

Last Updated : 31 May, 2020
Like Article

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


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">
    <title>Curve text using Canvas</title>
    <!-- Creating a canvas element in HTML-->
    <canvas id="canv" width="600" height="250"></canvas>
        /*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.translate(0, -1 * radius);
                context.fillText(string[i], 0, 0);


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads