The text is disappearing when i added the image

The text like “welcome” are not appearing when I added the av

<!DOCTYPE html>
<html>
    <style>
        @font-face {
            font-family: OpenSans;
            src: url(OpenSans-Bold.ttf);
         }
         
         * {
            font-family: OpenSans;
         }

    </style>
<body>
  <canvas id="myCanvas" width="1024" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the canvas element.
  </canvas>

  <script>
    var canvas = document.getElementById("myCanvas");
    var background = new Image();
    background.src = "https://i.imgur.com/ua7gL3M.png";
    let av = new Image();
    av.src = "https://cdn.discordapp.com/avatars/852848188942581764/6b54aba527059f96ecdcb06763d89dac.png?size=4096"

    // Make sure the image is loaded first otherwise nothing will draw.
    background.onload = function(){
        ctx.drawImage(background,0,0); 

        // The following lines were moved into the onload callback
        ctx.beginPath();
        ctx.arc(512,160,120,0,2*Math.PI);
        ctx.strokeStyle = "red"
        ctx.lineWidth = 15;
        ctx.stroke();
        ctx.closePath();
        ctx.clip();
        
        ctx.drawImage(av, 390, 40, 250, 250);

        ctx.beginPath();
        ctx.arc(405,160,120,0,2*Math.PI,true)
        ctx.clip();
        ctx.closePath();
        ctx.restore();
        //welcome
        ctx.fillStyle = "#00ffff";
        ctx.font = "90px OpenSans";
        ctx.shadowColor="black";
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY= 3;
        ctx.shadowBlur= 10;
        ctx.textAlign = "center"
        ctx.fillText("WELCOME", (canvas.width / 2) , 360 );
        //username
        ctx.fillStyle = "#2ffa76";
        ctx.font = "50px OpenSans";
        ctx.shadowColor="black";
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY= 3;
        ctx.shadowBlur= 10;
        ctx.textAlign = "center"
        ctx.fillText("Haruke#0001",(canvas.width / 2), 415);
        //thanks
        ctx.fillStyle = "#5076ff";
        ctx.font = "35px OpenSans";
        ctx.shadowColor="black";
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY= 3;
        ctx.shadowBlur= 10;
        ctx.textAlign = "center"
        ctx.fillText("Thanks For Joining!!",(canvas.width / 2), 460);
    }
    var ctx = canvas.getContext("2d");
  </script>

</body>

</html>