<center>
<canvas id="myCanvas" width="500" height="500"
style="border:1px solid #d3d3d3;">
</center>
<script>

let state = 0;

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";

ctx.fillText(">Пункт 1",0,50);
ctx.fillText("Пункт 2",0,100);
ctx.fillText("Пункт 3",0,150);
ctx.fillText("Пункт 4",0,200);
ctx.fillText("Пункт 5",0,250);

document.addEventListener('keydown', function(event) {

if (event.code == 'ArrowUp') {
state--;
if (state < 1 ) state = 1;
if (state == 1){
ctx.clearRect(0, 0, 500, 500);
ctx.fillText(">Пункт 1",0,50);
ctx.fillText("Пункт 2",0,100);
ctx.fillText("Пункт 3",0,150);
ctx.fillText("Пункт 4",0,200);
ctx.fillText("Пункт 5",0,250);

}
if (state == 2){
ctx.clearRect(0, 0, 500, 500);
ctx.fillText("Пункт 1",0,50);
ctx.fillText(">Пункт 2",0,100);
ctx.fillText("Пункт 3",0,150);
ctx.fillText("Пункт 4",0,200);
ctx.fillText("Пункт 5",0,250);
}
if (state == 3){
ctx.clearRect(0, 0, 500, 500);
ctx.fillText("Пункт 1",0,50);
ctx.fillText("Пункт 2",0,100);
ctx.fillText(">Пункт 3",0,150);
ctx.fillText("Пункт 4",0,200);
ctx.fillText("Пункт 5",0,250);
}
if (state == 4){
ctx.clearRect(0, 0, 500, 500);
ctx.fillText("Пункт 1",0,50);
ctx.fillText("Пункт 2",0,100);
ctx.fillText("Пункт 3",0,150);
ctx.fillText(">Пункт 4",0,200);
ctx.fillText("Пункт 5",0,250);
}

}
if (event.code == 'ArrowDown') {
state++;
if (state > 5 ) state = 5;

if (state == 1){
ctx.clearRect(0, 0, 500, 500);
ctx.fillText(">Пункт 1",0,50);
ctx.fillText("Пункт 2",0,100);
ctx.fillText("Пункт 3",0,150);
ctx.fillText("Пункт 4",0,200);
ctx.fillText("Пункт 5",0,250);
}
if (state == 2){
ctx.clearRect(0, 0, 500, 500);
ctx.fillText("Пункт 1",0,50);
ctx.fillText(">Пункт 2",0,100);
ctx.fillText("Пункт 3",0,150);
ctx.fillText("Пункт 4",0,200);
ctx.fillText("Пункт 5",0,250);
}
if (state == 3){
ctx.clearRect(0, 0, 500, 500);
ctx.fillText("Пункт 1",0,50);
ctx.fillText("Пункт 2",0,100);
ctx.fillText(">Пункт 3",0,150);
ctx.fillText("Пункт 4",0,200);
ctx.fillText("Пункт 5",0,250);
}

if (state == 4){
ctx.clearRect(0, 0, 500, 500);
ctx.fillText("Пункт 1",0,50);
ctx.fillText("Пункт 2",0,100);
ctx.fillText("Пункт 3",0,150);
ctx.fillText(">Пункт 4",0,200);
ctx.fillText("Пункт 5",0,250);
}

if (state == 5){
ctx.clearRect(0, 0, 500, 500);
ctx.fillText("Пункт 1",0,50);
ctx.fillText("Пункт 2",0,100);
ctx.fillText("Пункт 3",0,150);
ctx.fillText("Пункт 4",0,200);
ctx.fillText(">Пункт 5",0,250);
}
    
}
});

</script>