CODEWITHSUNDEEP
javascriptperformancehtmlanimationcanvas
Michael V.
Michael V.

Reputation: 43

How to optimize animation on canvas? HTML 5

I am faced with a problem that slows down animation on a canvas, as various pictures move left, right, up and down. I need advice on how to optimize the animation.

It is important that the animation works on all main browsers, in particular: Chrome, Firefox and Internet Explorer.

Is it possible to optimize the animation? Maybe put a delay on the drawing? Thank you in advance.

Upvotes: 4

Views: 7898

Answers (2)

Pro-grammar
Pro-grammar

Reputation: 375

In javascript you can use the setInterval and setTimeout functions to create delays and throttle the frame rate.

for instance if you wanted to make your drawing loop approximately 30 FPS you could have some code that looks like this:

function draw(){

        var canvas = document.getElementById('myCanvas');
        //create the image object
        var img = new Image();
        //set the image object's image file path
        var img.src = "images/myImage.png"
        //check to see that our canvas exists 
        if( canvas.getContext )
        {
            //grab the context to draw to.
            var ctx = cvs.getContext('2d');
            //clear the screen to a white background first
            //NOTE to make this faster you can clear just the parts
            //of the canvas that are moving instead of the whole thing
            //every time. Check out 'Improving HTML5 Canvas Performance'
                    //link mention in other post
            ctx.fillStyle="rgb(255,255,255)";
            ctx.fillRect (0, 0,512, 512);

            //DO ALL YOUR DRAWING HERE....

            //draw animation
            ctx.drawImage(img, 0, 0);
        }
        //Recalls this draw update 30 times per second
        setTimeout(draw,1000/30);
}

This will help you control how much processing time the animation is taking. Thus if you find that your animation is going too slow you can increase the frame rate by changing the denominator '30' to something like '60' fps or anything that really works well for your program.

As far as optimizing goes in addition to setTimeout() the way you draw your animations is critical too. Try to load all your images before you render them this is called "Preloading". That is if you have a bunch of different images for each animated cell then before you call your draw function load all the images into an array of images like so:

var loadedImages = new Array();
loadedImages[0] = new Image();
loadedImages[0].src = "images/animationFrame1.png";
loadedImages[1] = new Image();
loadedImages[1].src = "images/animationFrame2.png";
loadedImages[2] = new Image();
loadedImages[2].src = "images/animationFrame3.png";
loadedImages[3] = new Image();
loadedImages[3].src = "images/animationFrame4.png";

you could even put them in a hash if it makes sense for you app where instead of 

loadedImages[0] = new Image();
loadedImages[0].src = "images/animationFrame1.png";

you do this

loadedImages['frame1'] = new Image();
loadedImages['frame1'].src = "images/animationFrame1.png";

once you have all your images loaded you references them for drawing by doing calling them like so:

//Using the integer array
ctx.drawImage(loadedImages[0], 0, 0);
//OR
//Using the stringed hash 
ctx.drawImage(loadedImages['frame1'], 0, 0);

You want to separate your loading process from your rendering process because loading images is process intensive thus will slow your animations down if you are loading things while rendering.

That is not to say that you can't ever load anything while rendering, but instead just be conscience that this will slow animation speed down.

Here is an article on preloading images.

There is another post on here which talks about consistent animation speed on all browsers here

Note the link posted by the green checked answer

Other things to be noted are making sure to only clearing and redrawing bounding boxes as mentioned in the post with HTML 5 canvas optimization. That link has some really good techniques to be conscience of while developing canvas animations.

Here are some frame works as well which might come in handy to cross compare what you are doing to what other engines are doing.

Hope some of this helps. I am new to javascript (only started coding with it about 2 weeks ago) and so there could be better ways to do things but these are the things I have found thus far.

Upvotes: 3

Mikko Ohtamaa
Mikko Ohtamaa

Reputation: 83706

window.requestAnimationFrame() is one sure way to make your animation run smoother.

https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame

(cross browser http://paulirish.com/2011/requestanimationframe-for-smart-animating/ )

However it doesn't fix the possible problems with your drawing code which was missing from the question.

Upvotes: 1

Related Questions