Home » Tutorials

Creating HTML5 3D circle text with shadows

Image Tutorials
Author Reading 7 min Views 560 Published by Modified by

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:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Step 3. JS
  6. js/script.js
  7. Conclusion
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

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>HTML5 3D circle text with shadows | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <script type="text/javascript" src="js/script.js"></script>
08     </head>
09     <body>
10         <header>
11             <h2>HTML5 3D circle text with shadows</h2>
12             <a href="https://www.script-tutorials.com/html5-3d-circle-text-with-shadows/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
13         </header>
14         <div class="container">
15             <div class="contr">
16                 <input type="radio" name="mode" onchange="bPlay = false" checked /><label>Pause</label>
17                 <input type="radio" name="mode" onchange="bPlay = true" /><label>Play</label>
18             </div>
19             <canvas id="panel" width="600" height="600"></canvas>
20         </div>
21     </body>
22 </html>

Step 2. CSS

css/main.css

We are going to skip of publishing styles today again.

Step 3. JS

js/script.js

01 // variables
02 var canvas, ctx;
03 var bPlay = false;
04 var iAngle = 0;
05 var sText = 'Hello my 3D circle text ';
06 // drawing functions
07 function clear() { // clear canvas function
08     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
09 }
10 function drawScene() { // main drawScene function
11     if (bPlay == 1) {
12         clear(); // clear canvas
13         // fill background
14         ctx.fillStyle = '#d7e8f1';
15         ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
16         // change angle
17         iAngle+=0.005;
18         // and draw text circle in center of canvas with radius = 200
19         draw3DTextCircle(sText, canvas.width / 2, canvas.height / 2, 200, Math.PI / 2 - iAngle);
20     }
21 }
22 function draw3DTextCircle(s, x, y, radius, iSAngle){
23     // rarian per letter
24     var fRadPerLetter = 2*Math.PI / s.length;
25     // save context, translate and rotate it
26     ctx.save();
27     ctx.translate(x,y);
28     ctx.rotate(iSAngle);
29     // amount of extra bottom layers
30     var iDepth = 4;
31     // set dark green color for extra layers
32     ctx.fillStyle = '#168d1e';
33     // pass through each letter of our text
34     for (var i=0; i<s.length; i++) {
35         ctx.save();
36         ctx.rotate(i*fRadPerLetter);
37         // draw extra layers
38         for (var n = 0; n < iDepth; n++) {
39             ctx.fillText(s[i], n, n - radius);
40         }
41         // shadow params
42         ctx.fillStyle = '#00d50f';
43         ctx.shadowColor = 'black';
44         ctx.shadowBlur = 10;
45         ctx.shadowOffsetX = iDepth + 2;
46         ctx.shadowOffsetY = iDepth + 2;
47         // draw letter
48         ctx.fillText(s[i], 0, -radius);
49         ctx.restore();
50    }
51    ctx.restore();
52 }
53 // binding onload event
54 if (window.attachEvent) {
55     window.attachEvent('onload', main_init);
56 } else {
57     if(window.onload) {
58         var curronload = window.onload;
59         var newonload = function() {
60             curronload();
61             main_init();
62         };
63         window.onload = newonload;
64     } else {
65         window.onload = main_init;
66     }
67 }
68 function main_init() {
69     // create canvas and context objects
70     canvas = document.getElementById('panel');
71     ctx = canvas.getContext('2d');
72     // initial text settings
73     ctx.font = '64px Verdana';
74     ctx.textAlign = 'center';
75     ctx.textBaseline = 'middle';
76     // fill background
77     ctx.fillStyle = '#d7e8f1';
78     ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
79     // draw text circle in center of canvas with radius = 200
80     draw3DTextCircle(sText, canvas.width / 2, canvas.height / 2, 200, Math.PI / 2 - iAngle);
81     setInterval(drawScene, 40); // loop drawScene
82 }

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.

Rate article
© 2025 Script Tutorials