[sunAirway]

Для рисования готового изображения используется 3 паттерна для заливки, всё это собрано в одну функцию:

function drawFooter() {
    var footer = document.getElementById("canvas-footer");
    if (footer.getContext) {
        var footerContext = footer.getContext("2d");                
        var MainFooterimageObj = new Image();
        MainFooterimageObj.src = "images/bg-red2.gif";
        MainFooterimageObj.onload = function() {
            var MainFooterPattern = footerContext.createPattern(MainFooterimageObj, "repeat"); 

            footerContext.fillStyle = MainFooterPattern;
            footerContext.fillRect (0, 23, 940, 205);        
        };  
        
        var DarkFooterimageObj = new Image();
        DarkFooterimageObj.src = "images/bg-red3.gif";
        DarkFooterimageObj.onload = function() {
            var DarkFooterPattern = footerContext.createPattern(DarkFooterimageObj, "repeat");
                              
            footerContext.fillStyle = DarkFooterPattern;
            footerContext.fillRect (24, 70, 453, 148);
            footerContext.fillStyle = DarkFooterPattern;
            footerContext.fillRect (498, 70, 229, 148);
            footerContext.fillStyle = DarkFooterPattern;
            footerContext.fillRect (748, 70, 168, 60);
        };
                
        var LightFooterimageObj = new Image();
        LightFooterimageObj.src = "images/bg-red4.gif";
        LightFooterimageObj.onload = function() {
            var LightFooterPattern = footerContext.createPattern(LightFooterimageObj, "repeat");
            footerContext.beginPath();
            footerContext.moveTo(0, 23);
            footerContext.bezierCurveTo(0, 23, 30, 11, 60, 0);
            footerContext.bezierCurveTo(60, 0, 400, 0, 880, 0);
            footerContext.bezierCurveTo(880, 0, 905, 10, 940, 23);
            footerContext.bezierCurveTo(940, 23, 400, 23, 0, 23);

            footerContext.closePath();
            footerContext.fillStyle = LightFooterPattern;
            footerContext.fill();  
            
            footerContext.fillStyle = LightFooterPattern;
            footerContext.fillRect (53, 86, 410, 118); 
            footerContext.fillRect (512, 86, 200, 118);
        };      
    }
}

Периодически возникают проблемы или с подгрузкой изображений или ещё с чем-то, но в общем-то эффект такой - фоновое изображение, которое MainFooterimageObj отрисовывается, а два других нет, при повторном вызове функции drawFooter() через консоль браузера, в 95% случаев всё становится как надо.

Сталкивался ли кто-нибудь с этим? Может у кого-нибудь есть идеи по оптимизации?