How to create Animated 3D canvas object in HTML5

  • Reading time:4 mins read
3D Canvas 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:

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!