HTML-Canvas-Probleme mit doppelter Pufferung der Frame-Rate

Question

Ich habe eine bildschirmfüllende Leinwand mit 3 darauf gezeichneten Bildern. Wenn ich die Größe des Fensters ändere, ändern diese Bilder ihre Position, aber es scheint sehr glitchy zu sein, vor allem in Firefox.

Ich habe gelesen, dass Double-Buffering dieses Problem lösen sollte, aber ich frage mich, wie ich Double-Buffering würde, wenn die nächste Position unbekannt ist. Das heißt, ich kann nicht bestimmen, was in der Zukunft gepuffert werden soll, also wie wäre dies möglich sein?

Hier ist eine Quelle, die machbar scheint, aber ich verstehe das Konzept, das Fedor zu erklären versucht, nicht ganz.

Unterstützt HTML5/Canvas die doppelte Pufferung?

Bis jetzt habe ich,

    $canvas = $('#myclouds')[0];
    $canvas_buffer = $('canvas')[0].insertAfter($canvas).css('visibility', 'hidden');
    context = $canvas.getContext('2d');
    context_buffer = $canvas_buffer.getContext('2d');
    clouds_arr = [$canvas, $canvas_buffer];

$(window).resize(function () {
    drawCanvas();
};

function initCanvas() {

    // Sources for cloud images
    var cloud1 = '/js/application/home/images/cloud1.png',
        cloud2 = '/js/application/home/images/cloud2.png',
        cloud3 = '/js/application/home/images/cloud3.png';

    // add clouds to be drawn
    // parameters are as follows:
    // image source, x, y, ratio, adjustment)
    addCloud(cloud1, null, 125, .03);
    addCloud(cloud2, null, 75, .15);
    addCloud(cloud3, null, 50, .55);
    addCloud(cloud1, null, 125, .97, 300);
    addCloud(cloud2, null, 70, .85, 300);
    addCloud(cloud3, null, 45, .5, 300);

    // Draw the canvas
    drawCanvas();
}

function drawCanvas() {
    // Reset
    $canvas.attr('height', $window.height()).attr('width', $window.width());

    // draw the clouds
    var l = clouds.length;
    for (var i = 0; i < l; i++) {
        clouds[i].x = ($window.width() * clouds[i].ratio) - clouds[i].offset;
        drawimage(context, clouds[i]);
    }
}

function Cloud() {
    this.x = 0;
    this.y = 0;
}

function addCloud(path, x, y, ratio, offset) {
    var c = new Cloud;
    c.x = x;
    c.y = y;
    c.path = path;
    c.ratio = ratio || 0;
    c.offset = offset || 0;
    clouds.push(c);
}

function drawimage(ctx, image) {
    var clouds_obj = new Image();
    clouds_obj.src = image.path;

    clouds_obj.onload = function() {
        ctx.drawImage(clouds_obj, image.x, image.y);
    };
}