как сохранить рекорд и вывести его?

использую canvas, задача заключается в том, чтобы сохранить очки во время игры, закинуть в localstorage, а дальше выводить максимальное значение ( как рекорд )

let box = 32;
let score = 0;

// draw food and snake//
let snake = [];
snake[0] = {
    x: 9 * box,
    y: 10 * box
}
let snakeX = snake[0].x;
let snakeY = snake[0].y;
let food = {
    x: Math.floor((Math.random() * 17 + 1 )) * box ,
    y: Math.floor((Math.random() * 15 + 3 )) * box,
};

document.addEventListener('keydown', direction);



let dir;
function direction(event) {
    // playAudio.play();
    if(event.keyCode == 37 && dir != 'right'){dir = 'left'}
    else if(event.keyCode == 38 && dir != 'down'){dir = 'up'}
    else if(event.keyCode == 39 && dir != 'left' ){dir = 'right'}
    else if(event.keyCode == 40 && dir != 'up' ){dir = 'down'}  
}

function drawCanvas() {
    ctx.drawImage(playground, 0,0);
    ctx.drawImage(foodImg, food.x, food.y);
    for (let i = 0; i < snake.length; i++) {
        if(i == 0 ){
            ctx.drawImage(sneakHead2, snake[i].x, snake[i].y, box, box)
        }
        else{
          ctx.drawImage(sneakHead2, snake[i].x, snake[i].y, box, box)
        }
    }
    ctx.fillStyle = 'white';
    ctx.font = '45px Spicy Rice';
    ctx.fillText(score, box * 1.9, box * 2.2);

    if(snakeX == food.x && snakeY == food.y) {
        score++;
        food = {
          x: (Math.floor(Math.random() * 17 + 1 ) * box) ,
          y: (Math.floor(Math.random() * 15 + 3 ) * box) ,
        };
    } else {
          snake.pop();
    }

    if(snakeX < box || snakeX > box * 17 || snakeY < 3 * box || snakeY > box * 17) {
        window.location.reload(true);
    }

    let head = {
        x: snakeX,
        y: snakeY
    }
    eatTail(head, snake);
    snake.unshift(head);
}
let game = setInterval(drawCanvas, 80);

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