Não estou conseguindo movimentar a bolinha, atualizar a tela e manter o fundo preto. | Lógica de programação: comece em lógica com o jogo Pong e JavaScript

Não estou conseguindo movimentar a bolinha, atualizar a tela e manter o fundo preto. Observe que o código quando roda a bolinha atualiza a posição, mas o fundo não.

Penso que se houver alguma forma de criar um canvas sem utilizar o HTML, a posição da bolinha será atualizada sem ser necessário atualizar o fundo. Mas não consegui encontrar como fazer isso.

Sei que não é o p5*JS, quero tentar fazer tudo na mão.

Alguém sabe como ajudar?

Código que fiz abaixo:

<html lang="pt-br">

    <head>
    <canvas width="600" height="400"></canvas>
    <meta charset="utf-8">
    </head>

    <body>

        <script>



                var tela = document.querySelector("canvas");
                var pincel = tela.getContext("2d");

                pincel.fillStyle = 'black';
                pincel.fillRect(0, 0, 600, 400);

                function desenhaFundo(){

                    var tela = document.querySelector("canvas");
                    var pincel = tela.getContext("2d");

                    pincel.fillStyle = 'black';
                    pincel.fillRect(0, 0, 600, 400);
                }

            function desenhaBola(x, y){

                var tela = document.querySelector("canvas");
                var pincel = tela.getContext("2d");


                var raio = 10;

                pincel.fillStyle = 'white';
                pincel.arc(x, y, raio, 0, 2 * Math.PI);
                pincel.fill();

            }

            function desenhaRaquetePlayer(){

                var tela = document.querySelector("canvas");
                var pincel = tela.getContext("2d");

                pincel.fillStyle = 'white';
                pincel.fillRect(5, 165, 7, 70);
                pincel.fill();

            }


            function movimentaBolinha(){


                desenhaBola(x, 200);

                    if (x > 600){

                        movimento *= -1;                
                    }  

                    else if (x <= 0){

                        movimento *= 1;                                        
                    }        

                x = x + movimento;        
            }

            function limpaTela() {

                pincel.fillStyle = 'black';
                pincel.fillRect(12, 0, 590, 400);
            }


            var x = 0;
            var movimento = 1;
            desenhaRaquetePlayer();
            setInterval(movimentaBolinha, 5);
            //setInterval(limpaTela, 4);

        </script>


    </body>


</html>

Olá Vitor, não consegui resolver ser problema, mas já fiz um código de pong funcional usando o sublime um tempo atrás .

<canvas width="600" height="400"></canvas>
<meta charset="UTF-8">

<script>

    var xBola = 300; //coordenada x inicial da bola
    var yBola = 200; //coordenada y inicial da bola
    var sentidoX = 1;
    var sentidoY = 1;

    const larguraRaquete = 10;
    const alturaRaquete = 80;
    const raioCirculo = 7.5;

    var taxaErroRaquete = 0.62;
    var tecla;

    const xRaquete = 5;
    const xRaqueteAdversaria = 585;
    var yRaquete = 160;
    var yRaqueteAdversaria;
    var cima = 38;
    var baixo = 40;

    var velocidadeRaquete = 12;

    var pontos = 0;
    var pontosAdversario = 0;

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "black";
    pincel.fillRect(0,0,600,400);

    function desenhaRaquete(xRaquete, y){

        pincel.fillStyle = "white";
        pincel.fillRect(xRaquete, y, larguraRaquete, alturaRaquete);
    }

    function desenhaCirculo(xCirculo, yCirculo){

        pincel.fillStyle = "white";
        pincel.beginPath();
        pincel.arc(xCirculo, yCirculo, raioCirculo, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela(){

        pincel.clearRect(0, 0, 600, 400);
        pincel.fillStyle = "black";
        pincel.fillRect(0, 0, 600, 400);
    }

    function leDoTeclado(evento){

        tecla = evento.keyCode;

        if(tecla == cima){
            yRaquete = yRaquete - velocidadeRaquete;
        }else if(tecla == baixo){
            yRaquete = yRaquete + velocidadeRaquete;
        }
    }

    document.onkeydown = leDoTeclado;

    function atualizaTela(){

        limpaTela();

        yRaqueteAdversaria = yBola + (Math.random() - taxaErroRaquete);

        if(xBola > 600){        
            sentidoX = -1;
        }else if(xBola < 0){
            sentidoX = 1
        }

        if(yBola > 400){
            sentidoY = -1;
        }else if(yBola < 0){
            sentidoY = 1;
        }

        if((xBola == xRaquete + larguraRaquete) && (yBola > yRaquete) && (yBola < yRaquete + alturaRaquete)){
            sentidoX = 1;
        }

        if((xBola == xRaqueteAdversaria) && (yBola > yRaqueteAdversaria) && (yBola < yRaqueteAdversaria + alturaRaquete)){
            sentidoX = -1;
        }

        if(yRaquete < 5){
            velocidadeRaquete = 0;
            if(tecla == baixo){
                velocidadeRaquete = 12;
            }
        }else if(yRaquete > 395 - alturaRaquete){
            velocidadeRaquete = 0;
            if(tecla == cima){
                velocidadeRaquete = 12;
            }
        }

        desenhaCirculo(xBola, yBola);

        xBola = xBola + sentidoX;
        yBola = yBola + sentidoY;

        if(xBola == 0){
            pontosAdversario++;
        }

        pincel.font = "50px Georgia";
        pincel.fillStyle = "white";
        pincel.fillText(Math.round(pontosAdversario/2), 400, 75);
        pincel.font = "20px Georgia";
        pincel.fillText("ADVERSARIO", 355, 30);

        if(xBola == 600){
            pontos++;
        }

        pincel.font = "50px Georgia";
        pincel.fillStyle = "white";
        pincel.fillText(Math.round(pontos/2), 200, 75);
        pincel.font = "20px Georgia";
        pincel.fillText("VOCÊ", 190, 30);

        desenhaRaquete(xRaquete, yRaquete); //minha Raquete
        desenhaRaquete(xRaqueteAdversaria, yRaqueteAdversaria); //Raquete adversaria
    }

    setInterval(atualizaTela, 1);
</script>

Espero que consiga utilizá-lo para resolver seu problema xD ou melhorar ele.