Creating HTML5 3D circle text with shadows

HTML5 3D circle text with shadows

Another one great HTML5 tutorial. It tells us how to draw 3D text and display it in a circle. Also it tells us about applying shadow and 3D effect to text. Plus I am going to rotate text in a circle.

Here are our demo and downloadable package:

Live Demo

download in package

Ok, download the source files and lets start coding !

Step 1. HTML

As usual – very small HTML code with canvas element inside

index.html

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 3D circle text with shadows | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 3D circle text with shadows</h2>
            <a href="http://www.script-tutorials.com/html5-3d-circle-text-with-shadows/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="contr">
                <input type="radio" name="mode" onchange="bPlay = false" checked /><label>Pause</label>
                <input type="radio" name="mode" onchange="bPlay = true" /><label>Play</label>
            </div>
            <canvas id="panel" width="600" height="600"></canvas>
        </div>
    </body>
</html>

Step 2. CSS

css/main.css

We are going to skip of publishing styles today again.

Step 3. JS

js/script.js

// variables
var canvas, ctx;
var bPlay = false;
var iAngle = 0;
var sText = 'Hello my 3D circle text ';

// drawing functions
function clear() { // clear canvas function
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

function drawScene() { // main drawScene function
    if (bPlay == 1) {
        clear(); // clear canvas

        // fill background
        ctx.fillStyle = '#d7e8f1';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // change angle
        iAngle+=0.005;

        // and draw text circle in center of canvas with radius = 200
        draw3DTextCircle(sText, canvas.width / 2, canvas.height / 2, 200, Math.PI / 2 - iAngle);
    }
}

function draw3DTextCircle(s, x, y, radius, iSAngle){

    // rarian per letter
    var fRadPerLetter = 2*Math.PI / s.length;

    // save context, translate and rotate it
    ctx.save();
    ctx.translate(x,y);
    ctx.rotate(iSAngle);

    // amount of extra bottom layers
    var iDepth = 4;

    // set dark green color for extra layers
    ctx.fillStyle = '#168d1e';

    // pass through each letter of our text
    for (var i=0; i<s.length; i++) {
        ctx.save();
        ctx.rotate(i*fRadPerLetter);

        // draw extra layers
        for (var n = 0; n < iDepth; n++) {
            ctx.fillText(s[i], n, n - radius);
        }

        // shadow params
        ctx.fillStyle = '#00d50f';
        ctx.shadowColor = 'black';
        ctx.shadowBlur = 10;
        ctx.shadowOffsetX = iDepth + 2;
        ctx.shadowOffsetY = iDepth + 2;

        // draw letter
        ctx.fillText(s[i], 0, -radius);
        ctx.restore();
   }
   ctx.restore();
}

// binding onload event
if (window.attachEvent) {
    window.attachEvent('onload', main_init);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function() {
            curronload();
            main_init();
        };
        window.onload = newonload;
    } else {
        window.onload = main_init;
    }
}

function main_init() {

    // create canvas and context objects
    canvas = document.getElementById('panel');
    ctx = canvas.getContext('2d');

    // initial text settings
    ctx.font = '64px Verdana';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // fill background
    ctx.fillStyle = '#d7e8f1';
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // draw text circle in center of canvas with radius = 200
    draw3DTextCircle(sText, canvas.width / 2, canvas.height / 2, 200, Math.PI / 2 - iAngle);

    setInterval(drawScene, 40); // loop drawScene
}

I have defined own function to draw 3d text circle – draw3DTextCircle. This function have next params – text itself, coordinates, radius and angle. This function will split all text by letters, then I will draw each letter separately with rotation (and 3d effect).

Live Demo

download in package

Separate big thanks to this book. This book covers many aspects of using HTML5. From basics (draw primitives) to advanced techniques (One of chapters introduce us WebGL).

HTML5 Canvas Cookbook

Conclusion

Welcome back to read something new and interesting about HTML5. Good luck in your projects.

Enjoyed this Post?

If you enjoyed this article, feel free to share our tutorial with your friends.

Stay connected with us:

Written by: admin on November 30, 2011.

3 Comments

- Gopal IyerDecember 1, 2011 1:18 am
  Thanks for sharing the code to create 3D circle text with shadows. I am going to use it in my blog.
- pankajMarch 6, 2012 7:03 am
  hello thanks for sharing this..
  i need to use images not text and the same rotate effect….can u help me please?
  thanks
- adminMarch 11, 2012 9:21 am
  Hi pankaj,
  Try to use translate and rotate functions in your code to rotate custom objects.

Script Tutorials