Canvas Re-Draw For Animation

[glenelkins]

Hi

 

Here is the updated code. Here you can see the bird is re-drawn by clearing the rectangle, so that it animates the bird moving.

 

The issue i have now is when the bird is cleared it also clears anything else in the scene where the bird currently is. So if you see $.renderScene() draws 3 trees...how can I re-draw the bird without it effecting the trees? Because I have to keep re-drawing the trees as well so it looks like the trees flicker when the bird flies near them...not sure how to stop this so the trees stay on the screen while the bird moves...if i dont clear the canvas the bird will duplicate all over the scene

 

$(document).ready ( function() {
               
                // global vars
                var trees = new Array();
                var canvas = null;
                var bird = null;
                var birdX = 0;
                var birdY = 0;
                var posX = 2;
                var posY = 4;
               
               
                /*
                 function: renderScene
                 desc: renders the trees and any other objects onto the canvas - clears the canvas first
                            to avoid animation render repeating
                */
                $.renderScene = function() {
           
                   
                             // draw 3 trees
                    trees[0] = new Image();
                    trees[1] = new Image();
                    trees[2] = new Image();
                   
                    trees[0].onload = function() {
                       
                        canvas.drawImage ( trees[0], 0, 0 );
                    }
                    trees[1].onload = function() {
                       
                        canvas.drawImage ( trees[1], 700, 10);
                    }
                    trees[2].onload = function() {
                       
                        canvas.drawImage ( trees[2], 350, 100);
                    }
                    trees[0].src = 'tree.png';
                    trees[1].src = 'tree.png';
                    trees[2].src = 'tree.png';
                   
                   
                }
               
                /*
                 function: drawBird
                 desc: draws an animated bird
                */
                $.drawBird = function() {
                     
                     // create bird image object
                    bird = new Image();
                   
                    // create onload event handler to make sure the bird
                    // image loads - prevents crashing or halting
                    // - this is only called once the bird src is set
                    bird.onload = function() {
                       
                        // clear the canvas
                        canvas.clearRect( birdX - 10, birdY - 10, 90,90 );
                       
                        // draw the bird on our canvas
                        canvas.drawImage ( bird, birdX, birdY );
                       
                        if ( birdX + posX > 1024 || birdX + posX < 0 ) {
                           
                            posX = -posX;
                           
                        }
                       
                        if ( birdY + posY > 768 || birdY + posY < 0 ) {
                           
                            posY = -posY;
                        }
                       
                        birdX += posX;
                        birdY += posY;
                       
                        $('#pos').html ( 'X:' + birdX + 'Y:' + birdY );
                       
                       
                    }
     
                    // load the actual bird image
                    bird.src = "bird.png";

                    // Render the trees on top of the bird so the bird goes
                    // behind
                    $.renderScene();
                   
                   
                }
               
                /*
                    function: init
                    desc: initialise the canvas and interval for bird movement
                */
                $.init = function() {
                   
                    // get reference to the canvas element
                    canvas = $('#canvas')[0].getContext ( '2d' );
               
               
                    // set interval to the drawBird function as 10 milliseconds
                    return setInterval ( $.drawBird, 10 );
                   
                }
               
         
               
               
                // initialise
                $.init();
           
               
            });

[glenelkins]

Im going to explain this a bit clearer.

 

I have a canvas element on the page. I load up a Tree image using javascript by loading the tree.png file. I place this on the canvas as scenery.

 

After this i have an interval of 100 mil seconds that will load up the bird.png file and place it on the canvas using translate() to move it. Each time this runs I have to clear the canvas and re-draw the new bird position. All well and good.

 

Now the problem, when i clear the canvas obviously the tree vanishes as well. So, i have to again re-draw the tree in the interval with the bird. But by doing so the translate function seems to move the tree as well...as though it applies to every element on the canvas. On the other hand if i move the bird using variables and just drawing it in the new position manually each time the tree just flickers!

 

How can I keep the trees on the scene but allow the bird to move. This can be done without clearing the canvas, but the bird leaves a trail of uncleared images

 

Hope this is clearer !