Creating HTML5 3D circle text with shadows

  • Reading time:5 mins read
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

[sociallocker]

download in package

[/sociallocker]

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 | Dev School</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="https://dev-school.net/html5-3d-circle-text-with-shadows/" class="stuts">Back to original tutorial on <span>Dev School</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

Conclusion

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