HTML5 холст и drawImage

Question

Я создаю редактор диаграмм, и он отлично работает, перетащите & капля, копирование и прошлое все работает нормально. Но у меня есть проблемы с изображениями. У меня есть функция render(), которая запускается каждый раз, когда что-то меняется. Внутри функции рендеринга я вызываю код appendImg. Это срабатывает при первом запуске рендера. Но в следующий раз, и я попаду в блок кода else, изображения не будут отображаться на холсте. У меня есть эта if.else логика, потому что, если я запускаю img.onload каждый раз, когда что-то меняется, изображение загружается каждый раз, и я получаю много мерцания на экране. Насколько я могу выделить drawImage dosend, как это, когда img obj был сохранен с массивом, и я наклоняю, кажется, обнимаю его.

var images = []; //An array where images are stored. 

appendImg = function(inx, url, x, y, w, h) { 

    if (!images[inx]) { 
    var img = new Image(); 
    img.onload = function() 
    { 
     dg_context.drawImage(img, x, y, w, h); 
     images[inx] = img; 
    } 
    img.src = url; 
    }else{ 
    var img = images[inx]; 
    console.log(img); 
    dg_context.drawImage(img, x, y, w, h); 
    } 
} 

Answer 1

Попробуйте хранить ИПУ как свойство IMG так INX может запомнятся внутри OnLoad:

var images = []; //An array where images are stored. 

appendImg = function(inx, url, x, y, w, h) { 

    if (!images[inx]) { 
    var img = new Image(); 
    img.onload = function() 
    { 
     dg_context.drawImage(img, x, y, w, h); 
     images[img.index] = img; 
    } 
    img.index=inx; 
    img.src = url; 
    }else{ 
    var img = images[inx]; 
    console.log(img); 
    dg_context.drawImage(img, x, y, w, h); 
    } 
}