HTML5 Canvas не перерисовывает
 

Здравствуйте, сложилась следующая ситуация при использовании HTML5 Canvas.

Есть страничка с превьюшками рубашек и галстуков.
При клике на превью галстука, он рисуется на канве.

<img onclick="drawTieImg('tie1.png');" ... />

При клике превью рубашки должна рисоваться рубашка и галстук, который до этого был нарисован, чтобы рубашке не перетирала его.

<img onclick="drawShirtImg('blouse1.png'); drawTieImg(lastTie);" ... />

На деле рисуется только рубашка. Но при втором клике по превью текущей рубашки, галстук прорисовывается нормально. Пробежавшись по всем рубашкам, впоследствии галстук тоже рисуется нормально.

Данная проблема наблюдается только на хостинге, на локальном сервере - все ок. Есть осознание того, что это связано с тем, что галстук не успевает подгрузиться, но непонятно на данный момент как решить проблему и почему событие onload не справляется с этим.

Функции рисования такие:

var lastTie = '';

function drawTieImg(imgname) {
    var img = new Image();
    lastTie = imgname;
    img.src = IMG_URL+imgname;
    img.onload = function(){
    	ctx.drawImage(img, 0, 125);
    }
}

function drawShirtImg(imgname) {

    var img = new Image();
    img.src = IMG_URL+imgname;
    img.onload = function(){
    	ctx.drawImage(img, 0, 125);
    }

}

Заранее благодарен!

Попробуйте загружать картинки с галстуками при наведении, или при загрузке страницы.

А ведь, по идее, картинка с галстуком уже загружена, ведь должен перерисовываться тот галстук, который только что был выбран перед рубашкой.

Можно ссылку на сайт?

img.src = IMG_URL+imgname;
img.onload = function()

Местами поменяйте. Картинка может грузится из кеша, тогда onload не сработает

Да, конечно: http://man-classic.com/look1/ и на JS-файл - http://man-classic.com/look1/js/fitting.js

Убрал функцию галстука в рубашку.
Если сначала выбрать галстук, а потом рубашки переберать, то галстук
закрашивается при выборе первой, а при выборе второй появляется на мгновение перетерается снова. :-?

Пробовал разными сочетаниями. Результат одинаковый. :)

Как бы на глаз видно, что галстук затирается. Значит галстук должен рисоваться последним.

Это логично. :) Но не очень понятно, почему не рисуется он последним при использовании такой конструкции.

function drawShirtImg(imgname) {

    var img = new Image();
	img.onload = function(){
    	ctx.drawImage(img, 0, 125);
    }
    img.src = IMG_URL+imgname;
	
    drawTieImg(lastTie);

}

Потому что картинка отрисуется только после события onload, туда и подставьте drawTieImg

Спасибо, zebra? вроде работает! <3

Интересно, есть какой-то более-менее безгеморойный метод избежать мерцания при первичной прорисовке, которое иногда появляется? Или нужно какой-то прелодер делать?