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

Question

Я следую инструкциям по импорту и отображению изображений на холсте HTML5.Все отлично работает, пока не попробую изменить само изображение.Например, у меня будет желтый круг в качестве моего изображения, и скрипт отлично работает.Но если я открою само изображение в программе 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();

Answer 1

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

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

Причина, по которой он работает после нажатия кнопки «Обновить», заключается в том, что изображение теперь предварительно загружено в кэш.

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