Canvas: Click through images

For an homework I wanted to make an interactive Story. Basicly it is only click through images with the UP and DOWN button. But my Problem is: My If function over writes the if function before

It should work like clicking through a gallery, so very simple, but I can´t find the solution... `

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');     

var startImg = new Image();
startImg.onload = update;
startImg.src = 'img/start.png';

var eins = new Image();
eins.onload = update;
eins.src = 'img/1.png';

var zwei = new Image();
zwei.onload = update;
zwei.src = 'img/2.png';

window.onkeydown = function(e) {
e.preventDefault();
console.log(e.keyCode);

if(e.keyCode == 38) {
    weiter('UP');
}
else if(e.keyCode == 39) {
    weiter('RIGHT');
}
else if(e.keyCode == 40) {
    weiter('DOWN');
}
else if(e.keyCode == 37) {
    weiter('LEFT');
}
}

function update() {

ctx.clearRect(0,0, 500,500);
ctx.drawImage(startImg, 0, 0, 500, 500);
} 


function weiter(dir){
    if(dir == 'UP') {
        ctx.clearRect(0,0, 500,500);
        ctx.drawImage(eins, 0, 0, 500, 500);
        } 
context.closePath();
context.fill();

    if(dir == 'UP') {
        ctx.clearRect(0,0, 500,500);
        ctx.drawImage(zwei, 0, 0, 500, 500);
        } 
context.closePath();
context.fill();
}
</script>

`