Изображение, нарисованное на 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();