HTML5 Canvas Image Moving Flickering

Question

In canvas, there is a image, which moves on events of arrow keys. But it flickers in firefox and works fine on chrome and ie.

I don't want a solution like to clear only the portion of canvas, because I have other things added in canvas too.

Below is my code:

var
velY = 0,
velX = 0,
speed = 2,
friction = 0.90,
keys = [],

canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
playerDirection="img/player/player_back.png";

function update() {

    if (keys[38]) {
        if (velY > -speed) {
            velY--;
            playerDirection="img/player/player_back.png";
        }
    }

    if (keys[40]) {
        if (velY < speed) {
            velY++;
            playerDirection="img/player/player_front.png";
        }
    }
    if (keys[39]) {
        if (velX < speed) {
            velX++;
            playerDirection="img/player/player_right.png";
        }
    }
    if (keys[37]) {
        if (velX > -speed) {
            velX--;
            playerDirection="img/player/player_left.png";
        }
    }

    velY *= friction;
    y += velY;
    velX *= friction;
    x += velX;

    if (x >= canvas.width - player.width) {
        x = canvas.width - player.width;
    } else if (x <= 5) {
        x = 5;
    }

    if (y > canvas.height - player.height) {
        y = canvas.height - player.height;
    } else if (y <= 5) {
        y = 5;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    playerObj = new Image();
    playerObj.onload = function()
    {
        ctx.drawImage(playerObj, x, y);
    };
    playerObj.src = playerDirection;


}

update();


function handlerKeyDown(e)
{
    keys[e.keyCode] = true;
}

function handlerKeyUp(e) {
    keys[e.keyCode] = false;
}

Thanks in adavance.

Answer 1

This is what I meant with "caching the images":

var images = {}; // This will contain the Image objects
// Other definitions...

function update() {

    if (keys[38]) {
        if (!images.back) {
            // The image object hasn't been defined yet.
            images.back = new Image();
            images.back.src = "img/player/player_back.png";
        }
        playerObj = images.back;
    }
    // Other checks on the pressed keys
    // ...

    // Computations on the position...

    if (!playerObj.naturalWidth) {
        // If naturalWidth/Height is 0, then the image hasn't been loaded yet.
        // We update the onload listener to draw in the right position.
        playerObj.onload = function() {
            ctx.drawImage(playerObj, x, y);
        };
    // The image has already been loaded, so we just draw it
    } else ctx.drawImage(playerObj, x, y);
}

(As an warning on your code, it seems that you want to handle multiple pressed keys, but the last one in the sequence up-down-right-left always "wins" over the others. Is that really what you want?)