How to create Animated 3D canvas object in HTML5

Custom drawn 3d object on canvas (html5). Today’s lesson very interesting, we’ll learn how to create 3D objects using HTML5. This is our first lesson on the practice HTML5. In this tutorial we will make a quadrangular star. Which will rotate around its axis. Read more.

Here are samples and downloadable package:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/main.css
Step 3. JS
js/main.js
Conclusion

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<!DOCTYPE html> 
  
<html lang="en"> 
  
<head> 
  
    <title>3D Canvas HTML5</title> 
  
    <link rel="stylesheet" type="text/css" href="css/main.css" /> 
  
    <script type="text/javascript" src="js/main.js"></script> 
  
</head> 
  
 <body> 
  
    <div class="example"> 
  
        <canvas id="star_object" style="border:1px solid black;"><p class="noCanvas">Sorry, your browser don`t support Canvas in HTML5</canvas> 
  
    </div> 
  
 </body> 
  
</html>

Very easy, isn`t it? I just draw here our canvas object. Main drawing will in javascript of course.

Step 2. CSS

Here are single CSS file with all necessary styles (this is just styles for our example layout):

css/main.css

body{background:#eee;margin:0;padding:0} 
  
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}

Step 3. JS

Here are our main JS code:

js/main.js

var iStarSize = 150; 
  
var iCanvasWidth = 500; 
  
var iCanvasHeight = 500; 
  
var context, canvas; 
  
var x, y; 
  
var degrees = 0.0; 
  
var dx, dy; 
  
function run() { 
  
    degrees += 0.1; 
  
    if (x + dx > iStarSize/2 || x + dx < -iStarSize/2) 
  
        dx = -dx; 
  
    x += dx; 
  
    /*if (y + dy > iStarSize/2 || y + dy < -iStarSize/2) // for future 
  
        dy = -dy; 
  
    y += dy;*/ 
  
    render(); 
  
} 
  
function render() { 
  
    context.clearRect(0, 0, iCanvasWidth, iCanvasWidth); 
  
    context.save(); 
  
    // set initial position 
  
    context.translate( iStarSize * 1.5, iStarSize * 1.5 ); 
  
    // set the style properties 
  
    context.fillStyle = '#bbb'; 
  
    context.strokeStyle = '#000'; 
  
    context.lineWidth = 2; 
  
    // starting custom object - star 
  
    context.beginPath(); 
  
    // you can uncomment it to add ordinary rotate 
  
    //context.rotate(degrees); 
  
    // changing necessary points to simulate 3d rotating 
  
    context.moveTo( 0, -iStarSize ); 
  
    context.lineTo( iStarSize / 10 - x / 5, - iStarSize / 5 ); 
  
    context.lineTo( iStarSize / 2 - x, 0 ); 
  
    context.lineTo( iStarSize / 10 - x / 5, iStarSize / 5 ); 
  
    context.lineTo( 0, iStarSize ); 
  
    context.lineTo( -iStarSize / 10 + x / 5, iStarSize / 5 ); 
  
    context.lineTo( -iStarSize / 2 + x, 0 ); 
  
    context.lineTo( -iStarSize / 10 + x / 5, - iStarSize / 5 ); 
  
    context.lineTo( 0, -iStarSize ); 
  
    // add shadow to object 
  
    context.shadowOffsetX = 10; 
  
    context.shadowOffsetY = 10; 
  
    context.shadowBlur    = 4; 
  
    context.shadowColor   = 'rgba(180, 180, 180, 0.8)'; 
  
    // fill shape, draw stroke 
  
    context.fill(); 
  
    context.stroke(); 
  
    context.closePath(); 
  
    context.restore(); 
  
    // echo some debug information 
  
    context.font = '12px Verdana'; 
  
    context.fillStyle = '#000'; 
  
    context.fillText('x: ' + x + '; y: ' + y, 10, 15); 
  
    context.fillText('dx: ' + dx + '; dy: ' + dy, 10, 30); 
  
} 
  
window.onload = function(){ 
  
    canvas = document.getElementById('star_object'); 
  
    // set size of our canvas area 
  
    canvas.width = iCanvasWidth; 
  
    canvas.height = iCanvasWidth; 
  
    context = canvas.getContext('2d'); 
  
    // init of inner variables 
  
    x = y = 1; 
  
    dx = dy = 4; 
  
    setInterval(run, 20); 
  
};

I tried to comment quite any row of my code. You should just point attention what I doing inside ‘render’ function.

Live Demo

Conclusion

I hope our first lesson about working with HTML5 showed you an interesting, if you have any suggestions, or you just have to say – we are glad to hear it. Good luck!