Холст нагрузки Предыдущее изображение

Question

У меня есть холст с идентификатором cnv.

<canvas id='cnv'></canvas> 

У меня есть функция javascript, которая изменяет изображение на холсте. Изображения меняются.

function changeImageInACanvas(dynamicSource){  
    var myid_signature = document.getElementById("cnv");  
    var myid_ctx_signature= myid_signature.getContext('2d'); 
    var myid_signature_image = document.getElementById("img_mysignature");             
    myid_signature_image.src = dynamicSource;      

    myid_ctx_signature.clearRect(0, 0, myid_signature.width, myid_signature.height);    

    if (myid_signature_image.complete){ 
     myid_ctx_signature.drawImage(myid_signature_image,0,0, myid_signature_image.width, myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height);                         
    }else{ 
     myid_signature_image.onload = function() {        
      myid_ctx_signature.drawImage(myid_signature_image,0,0, myid_signature_image.width, myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height);                         
     };            
    } 
} 

В первый раз функция была выполнена изображение загружается должным образом на холсте, но во второй раз, на экране отображалось предыдущее изображение и новое изображение не отображалось.

Я отлаживаю его, помещая точку прерывания в каждую строку функции. Я обнаружил, что новое изображение загружается во второй раз, когда функция была выполнена, но после функции холст снова загружает предыдущее/первое изображение. Где мне не хватает?

Answer 1

Вы должны изменить декларацию переменных изображений из

var myid_signature_image = document.getElementById("img_mysignature"); 

Для

var myid_signature_image = new Image(); 

Тогда вы будете иметь возможность использовать функцию по назначению.

Быстрый пример в этом Jsfiddle

Обновленный ответ: OnLoad-событие иногда активируется после того, как изображение источника заявил Бен. Вместо этого объявите это раньше.

function changeImageInACanvas(dynamicSource){  
 
    var myid_signature = document.getElementById("cnv");  
 
    var myid_ctx_signature= myid_signature.getContext('2d'); 
 
    var myid_signature_image = new Image(); 
 
    
 
    myid_signature_image.onload = function() { //declare the onload-event      
 
     myid_ctx_signature.clearRect(0, 0, myid_signature.width, myid_signature.height); 
 
     myid_ctx_signature.drawImage(myid_signature_image,0,0, myid_signature_image.width, myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height); 
 
         
 
    } 
 
    myid_signature_image.src = dynamicSource; //declare the source last 
 
} 
 

 

 
changeImageInACanvas('http://pattersonrivervet.com.au/sites/default/files/pictures/Puppy-10-icon.png');  
 

 
setTimeout(function() { 
 
changeImageInACanvas('https://38.media.tumblr.com/avatar_2be52b9ba912_128.png'); 
 
},3000); 
 
             

<canvas id='cnv'></canvas>