using clearRect in requestAnimationFrame does not show the animation

Question

What I am trying to do a simple javascript animation on the HTML5 canvas. Right now my canvases are layered so that when I receive a mouse event the background layer doesn't change but the top layer with the avatars move around. If I use requestAnimationFrame and don't clear the screen, I see my nice little player moving across the screen in multiple frames with a long tail of the character. However, if I try and do the clearRect after each animation frame, then my character never appears and I'm not sure what is causing this.

I am using these links as a basis for my code:
http://www.html5canvastutorials.com/advanced/html5-canvas-start-and-stop-an-animation/ http://paulirish.com/2011/requestanimationframe-for-smart-animating/ http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/

A lot of the examples are animating shapes that are drawn, whereas I'm using images, not sure if this matters and whether I should've just used a canvas transform function instead of clearRect, but didn't think this should've made a difference. Also, I deleted a bunch of code for readability, so the brackets may be off, but the code is functioning, I just did it for readability so you see animation in one direction. My code looks something like:

// what is this function for? See here - http://stackoverflow.com/questions/10237471/please-explain-this-requestanimationframe-idiom
window.requestAnimFrame = function(callback){
// add in this parentheses - http://stackoverflow.com/questions/5605588/how-to-use-    requestanimationframe
   return ( window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    }
);
}();

function stopAnimatingPlayer(currentAvatarAnimating, destinationCellX, destinationCellY) {
    gIsAnimating = false;
    //Did this final draw because I wasn't sure if the avatar would end on the exact pixel position, so this should snap him back into place
    drawAvatar(currentAvatarAnimating, destinationCellX, destinationCellY, false,0,0);
}   

function movePlayer(lastTime, playerPixelX, playerPixelY, destinationCellX, destinationCellY) {
if (gIsAnimating) {
    // the canvas is already globally held as gAvatarCanvasElement & gAvatarDrawingContext;

    // update
    var date = new Date();
    var time = date.getTime();
    var timeDiff = time - lastTime;
    var linearSpeed = 100;
    // pixels / second
    var linearDistEachFrame = linearSpeed * timeDiff / 1000;
    var horizontal = false;
    var newX, newY;

    // gets the new coordinate of the player
    if (gTowerCurrentPlayer == 1) {
        //fill in later - just trying to get one horizontal animation working
        } else if (destinationCellY == gPlayer1Cell.y) { // we're moving horizontally
    var currentX = playerPixelX;
            var diffX = destinationCellX - gPlayer1Cell.x;
            horizontal = true;
            if (diffX > 0) { // player is moving right - just get one direction going for now
                if (currentX < getPixelFromRow(destinationCellX)) {
                    newX = currentX + linearDistEachFrame;
                } else {
                    stopAnimatingPlayer(gTowerCurrentPlayer, destinationCellX, destinationCellY); 
                }
            } //fill in rest later - get one direction working

    lastTime = time;

    // clear - this is where the problem is
    gAvatarDrawingContext.clearRect(playerPixelX, playerPixelY, kPieceWidth, kPieceHeight);
    //gAvatarDrawingContext.clearRect(0,0, gAvatarCanvasElement.width, gAvatarCanvasElement.height);

    if (horizontal) {
        drawAvatar(gTowerCurrentPlayer, 0, 0, true, newX, playerPixelY);
        // request new frame
        requestAnimFrame(function(){ 
            movePlayer(lastTime, newX, playerPixelY, destinationCellX, destinationCellY);
        });
    } 
}
}

function animatePlayer(playerPixelX, playerPixelY, destinationCellX, destinationCellY) {
    gIsAnimating = true; // global var here
    var date = new Date();
    var time = date.getTime();
    movePlayer(time, playerPixelX, playerPixelY, destinationCellX, destinationCellY); 
}

If anyone could provide any help I would really appreciate it, I'm just not getting why this is not working. I don't need super flashy animations which is why i didn't go with kineticjs or any of the other libraries out there.

Thanks.

Does it work correctly if you remove the `if(horizontal) {` condition after you clear the old position? — nEx.Software, Jul 02 '12 at 00:04
I put a console.log call right before the drawAvatar function so I know it is being called every frame. — user1031885, Jul 03 '12 at 14:33

score 2 · Answer 1 · answered Jul 01 '12 at 09:47

2

When you clear the canvas, it erases everything on it, so if you call it after you've drawn you get a blank canvas, which is what you are describing. Instead, you should wait until the next frame, and then clear the canvas before drawing, rather than after, so that the drawn image shows up for a while. To fix your problem, just move your clearing command up so that it happens immediately before your drawing commands for each frame.

answered Jul 01 '12 at 09:47

mindoftea

816
6
16

I'm not sure where further up I can move the clear. I moved it to basically the top of the recursive function and it still clears. – user1031885 Jul 01 '12 at 19:15

using clearRect in requestAnimationFrame does not show the animation

1 Answers1

Linked