Created on Feb. 8, 2013, 1:28 a.m. by Hevok & updated by Hevok on May 2, 2013, 5:08 p.m.

A List of Image assets can be used to create an Animation. All these Images need to be loaded and placed into a frame array. After all Images are loaded an Animation function is called that actually draws the Animation Images to the screen. If the Animation is finished it loops back to the beginning. Once all Images are loaded animate is called via setInterval. setinterval takes as input a pointer to a function that shall be called as well as a millisecond count on how often it should be called (e.g. once every 30 milliseconds).

To accomplish this at the top of the code two variables are declared, namely frameRate and frame. frameRate determines how often the animate function will be called. frame represents the current frame in the Animation. As a frames array is also available it will be looped through the predefined assets and each of the defined image loaded into the frame array. This follows the common procedure of:

  1. Create new Image
  2. Set its on load result
  3. Set its source

Once this is done, the setInterval function is called which itself calls the animate function at the defined frameRate. The animate function as a frame counter to define which Image out of the frame array has to be drawn to the Canvas at a defined position. Once a frame is drawn it is incremented as well and modulo it by the frame's length. Every time the frame rate becomes bigger than the frames length the module trick sets it back to 0 without any if statement.

To prevent any halo effect due to fact that the Canvas doesn't clear itself each frame, the clearRect method of the Context is called. This method clears all the pixels to some default value and therefore allows to draw back on top of it.

    <body id="body">
            var canvas = null;
            var context = null;
            var frameRate = 1000/30;
            var frame = 0;
            var assets = ['/media/js/standalone/libs/gamedev_assets/robowalk/robowalk00.png',
            var frames = [];

            var onImageLoad = function(){

            var setup = function() {
                body = document.getElementById('body');
                canvas = document.createElement('canvas');

                context = canvas.getContext('2d');

                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;


                for (var i = 0; i < assets.length; i++) {
                    //var img = new Image();
                    //img.onload = onImageLoad;
                    //img.src = assets[i];
                    //frames[i] = img;
                    frames.push(new Image());
                    frames[i].onload = onImageLoad;
                    frames[i].src = assets[i];



            var animate = function() {
                context.clearRect(0,0,canvas.width, canvas.height);
                // if (frame > 19 - 1) frame = 0; // frames.length
                context.drawImage(frames[frame], 192, 192);
                // frame += 1;
                // frame++;
                frame = (frame + 1) % frames.length;



Tags: drawing, programming, images, coding, html, redering
Categories: Tutorial, reST
Parent: HTML5
Children: Spritesheet

Update entry (Admin) | See changes

Comment on This Data Unit