Immagine disegnata su HTML5 Canvas non viene visualizzata correttamente al primo caricamento

Question

Sto seguendo un tutorial sull'importazione e la visualizzazione di immagini su un canvas HTML5. Tutto funziona bene, finché non provo a cambiare l'immagine stessa. Per esempio, avrò un cerchio giallo come immagine mia, e lo script funziona bene. Ma se apro l'immagine stessa in Paint e cambi il cerchio in rosso, e aggiorno la pagina, il cerchio non verrà visualizzato fino a quando non clicco o aggiorno di nuovo una seconda volta manualmente. Ecco il frammento di codice che sto utilizzando:

var topMap = new Image(); 
topMap.src = "topMap.png"; 

function drawMap() { 
    context.clearRect(0, 0, WIDTH, HEIGHT); 
    context.drawImage(topMap, 0, 0); 
} 

function init() { 
    drawMap(); 
} 

init(); 

Answer 1

Il cerchio non è probabilmente rivelando perché si sta disegnando prima l'immagine viene caricata. Cambia la tua ultima dichiarazione a:

// Lets not init until the image is actually done loading 
topMap.onload = function() { 
    init(); 
} 

Il motivo per cui funziona dopo aver colpito aggiornamento è perché l'immagine è ormai pre-caricato nella cache.

Si desidera sempre attendere il caricamento delle immagini prima di tentare di disegnarle oppure non verrà visualizzato nulla sulla tela.