HTML5/Canvas flickering animation

Question

I've read Does HTML5/Canvas Support Double Buffering? and related questions and I use double buffering but it's doesent help some times. Actually I use another way for double buffering but it have same issue.

function drawLoop() {
    var scr_context = scr.getContext('2d'); // main canvas
    var units_context = units_buffer.getContext('2d'); // units buffer
    var unitcolors_context = unitcolors_buffer.getContext('2d'); // units color buffer
    var i;

    // background
    scr_context.fillStyle = "#FFFFEE";
    scr_context.fillRect(0, 0, scr.width, scr.height);

    units_context.clearRect(0, 0, units_buffer.width, units_buffer.height);
    unitcolors_context.clearRect(0, 0, unitcolors_buffer.width, unitcolors_buffer.height);

    for (i = 0; i < units_list.length; i++) {
        units_list[i].draw(units_context, camera); // flicker some times
        units_list[i].drawColor(unitcolors_context, camera); // never flicker
    }

    scr_context.drawImage(unitcolors_buffer, 0, 0);
    scr_context.drawImage(units_buffer, 0, 0);

    drawTimer = setTimeout(drawLoop, 1000 / FPS);
}

Draw methods:

this.draw = function(context, camera) {
    var sprite;
    var drawCoordinates;
    sprite = this.sloader.getSpriteByName(this.spritePos.spriteName);
    drawCoordinates = sprite.getDrawCoordinatesByXY(this.spritePos.x, this.spritePos.y, camera);
    context.drawImage(sprite.getImage(), drawCoordinates.x, drawCoordinates.y);
    return;
}
this.drawColor = function(context, camera) {
    var sprite;
    var drawCoordinates;
    sprite = this.sloader.getSpriteByName(this.spritePos.spriteName);
    drawCoordinates = sprite.getDrawCoordinatesByXY(this.spritePos.x, this.spritePos.y, camera);
    context.putImageData(this.unitMarkBackground, drawCoordinates.x + 21, drawCoordinates.y + 17);
    return;
}

Have no idea how flickering happen or never happen in almost same code, same buffered. I've test it in Chrome 20 and FireFox 13, both hase same issue.

what happens when you use requestanimationframe instead of the standard timeout? — Alex, Sep 14 '12 at 01:33

score 0 · Accepted Answer · answered Nov 01 '12 at 12:33

You don't need doublebuffering, it's kinda already implemented by the browser's engine. Just draw everything on scr_context and keep scr_context.fillRect() on top of drawLoop() before any other drawing. Are you sure getDrawCoordinatesByXY() returns always on screen values?

HTML5/Canvas flickering animation

1 Answers1