2

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.

1
  • what happens when you use requestanimationframe instead of the standard timeout?
    – Alex
    Sep 14, 2012 at 1:33

1 Answer 1

0

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.