Imagen dibujada en HTML5 El lienzo no se muestra correctamente en la primera carga

Question

Estoy siguiendo un tutorial sobre la importación y visualización de imágenes en un lienzo HTML5. Todo funciona bien, hasta que trato de cambiar la imagen en sí. Por ejemplo, tendré un círculo amarillo como mi imagen y la secuencia de comandos funciona bien. Pero si abro la imagen en Paint y cambio el círculo a rojo, y actualizo la página, el círculo no aparecerá hasta que haga clic o actualice de nuevo por segunda vez manualmente. Aquí está el fragmento de código que estoy usando:

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

El círculo es, probablemente, no se presentó debido a que está dibujando antes de que se cargue la imagen. Cambiar su última declaración a:

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

La razón funciona después de golpear actualización es porque la imagen ya está pre-cargado en la memoria caché.

Siempre desea esperar a que se carguen las imágenes antes de intentar dibujarlas o no aparecerá nada en el lienzo.