Здравствуйте, сложилась следующая ситуация при использовании 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);
}
}
Заранее благодарен!
