Изображение, нарисованное на HTML5 Холст, не отображается правильно при первой загрузке

Я следую учебному курсу по импорту и отображению изображений на холсте HTML5. Все работает нормально, пока я не попытаюсь изменить сам образ. Например, у меня будет желтый круг в качестве моего изображения, а script отлично работает. Но если я сам открою изображение в Paint и измените круг на красный, и обновите страницу, круг не появится, пока я не нажму или не обножу снова второй раз вручную. Вот фрагмент кода, который я использую:

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();

Ответ 1

Круг, вероятно, не отображается, потому что вы рисуете его перед загрузкой изображения. Измените последнее утверждение на:

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

Причина, по которой он работает после того, как вы нажмете обновление, состоит в том, что изображение теперь предварительно загружено в кеш.

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