Movendo a bolinha pelo teclado | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Boa tarde pessoal! Compartilho com vocês minha solução.
<!DOCTYPE html>
<html lang="pt_BR">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 3px double brown;
            padding: 25px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
        }

        div h1,
        h3 {
            margin-bottom: 5px;
            color: brown;
        }

        canvas {
            background-color: lightgray;
        }
    </style>

    <title>Lógica de Programação II</title>
</head>

<body>
    <div>
        <h1>04 - Movendo elementos: animações simples</h1>
        <h3>08 - Movendo a bolinha pelo teclado</h3>

        <canvas width="600" height="400"></canvas>

    </div>

    <script>

        // Declaração das constantes.
        const canvas = document.querySelector("canvas");
        const context = canvas.getContext("2d");

        // Declaração das variáveis.
        var x = 20;
        var y = 20;

        var left = 37;
        var up = 38;
        var right = 39;
        var down = 40;

        var rate = 10;

        // Função responsável por desenhar o círculo.
        function drawCircle(x, y, radius) {
            context.fillStyle = "blue";
            context.beginPath();
            context.arc(x, y, radius, 0, 2 * Math.PI);
            context.fill();
        }

        // Função responsável por limpar a tela.
        function clearCanvas() {
            context.clearRect(0, 0, 600, 400);
        }

        // Função responsável por estar atualizando a tela.
        function updateCanvas() {
            clearCanvas();
            drawCircle(x, y, 10);
        }

        // Função responsável por capturar as teclas pressionadas.
        function readKeyboard(e) {
            switch (e.keyCode) {
                case left:
                    x = x <= 10 ? x : x - rate;
                    break;
                case up:
                    y = y <= 10 ? y : y - rate;
                    break;
                case right:
                    x = x >= 590 ? x : x + rate;
                    break;
                case down:
                    y = y >= 390 ? y : y + rate;
                    break;
            }
        }

        setInterval(updateCanvas, 20);
        document.onkeydown = readKeyboard;

    </script>
</body>

</html>