HTML5 Canvas blinking on drawing

Question

I'm beginning with an isometric game, and my canvas is blinking(Not in IE) when draws all the parts of the ground. When I set fps to 20 or less, the blinking stops. How can I solve that? Any ideas?

var camerax = 300, cameray = 100;
var fps = 60;

function draw() {
    clearCanvas();
    drawGround();
}

function drawGround() {
    var img = new Image();
    img.onload = function() {
    var width = img.width;
    var height = img.height;
    for (var x = 0; x < 3; x++) {
        for (var y = 3; y >= 0; y--) {
                mx = (x-y)*height + camerax;
                my = (x+y)*height/2 + cameray; 
                ctx.drawImage(img, mx, my);
             }
        }
    }
    img.src = "ground.png";
}

var loop = setInterval(function() {
    update();
    draw();
}, 1000/fps);

Answer 1

Right now you're reloading the image every frame and unless the onload callback fires within the 16ms of the frame you're going to see a blank canvas.

You should only need to call the new Image, img.onload sequence once, to preload your images. The onload callback would then kick off your first frame, and the draw calls are free to use the image in memory.

Something like:

var camerax = 300, cameray = 100;
var fps = 60;
var img;
var loop;

function init() {
    img = new Image();
    img.onload = function() {
        loop = setInterval(function() {
            update();
            draw();
        }, 1000/fps);
    };
    img.src = "ground.png";
}

function draw() {
    clearCanvas();
    drawGround();
}

function drawGround() {
    var width = img.width;
    var height = img.height;
    for (var x = 0; x < 3; x++) {
        for (var y = 3; y >= 0; y--) {
                mx = (x-y)*height + camerax;
                my = (x+y)*height/2 + cameray; 
                ctx.drawImage(img, mx, my);
             }
        }
    }
}

Of course, it gets more complex once you're waiting for multiple images to preload since you need to start the loop only once all of them are done.

Answer 2

Nice tip, freejosh! Thanks! My screen now is not blinking and the code result was that:

        var canvas = document.getElementById("game");
        var ctx = canvas.getContext("2d");

        var camerax = 300, cameray = 100;
        var fps = 60;
        var img;
        var loop;

        function update() {
        }

        function draw() {
            clearCanvas();
            drawGround();
        }

        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

        function drawGround() {
            var width = img.width;
            var height = img.height;
            for (var x = 0; x < 3; x++) {
                for (var y = 3; y >= 0; y--) {
                    mx = (x-y)*height + camerax;
                    my = (x+y)*height/2 + cameray; 
                    ctx.drawImage(img, mx, my);
                }
            }
        }

        function init() {
            img = new Image();
            img.onload = function() {
                drawGround();
            };
            img.src = "ground.png";
        }

        function keyListener(e){
           e = e || window.event

           if(e.keyCode==37){
              camerax--;
           }
           else if(e.keyCode==39){
              camerax++;
           }
           else if(e.keyCode==38){
              cameray--;
           }
           else if(e.keyCode==40){
              cameray++;
           }                           
        }

        window.onkeypress = function(e) {
            keyListener(e);
        }

        init();
        var loop = setInterval(function() {
            update();
            draw();
        }, 1000/fps);