background image overlays text

I'm new to p5play and was trying to make a flappy bird game. Everything works fine, but none of my texts display. When I tried commenting out code where I deal with the background image, the texts showed up so I guess the background image just lays on top of the text and covers up all the texts.

I tried adding the texts after I'm putting the background on, but since I am using camera to track my flappy bird and make the background move along I'm a little confused as to where I'm supposed to add the texts so that they show up.

Here's my setup() and draw() function with minimum extra code (I have comments of what the code is doing but have removed the actual code that is unrelated to make it simpler):

function setup() {
  
    // allSprites.debug=kb.presses('w')
    createCanvas(400, 600);
    
    //Create sky & ground sprite
    sky=new Sprite(skybg);
    sky.collider='n';
    ground = new Sprite(groundImg,200, 350, 750, 40, "n");
    groundImg.resize(1500,0);

    //Set the camera location
    camera.x = 150;
    gameOver = true;
    canStartNewGame = true;
}

function draw() {


    allSprites.debug=kb.pressing('w')
    //Starts the game with a mouse pressed or space bar
    if (mouse.presses() || kb.presses("space")) {
        bird.vel.y = -9;
    
        if (canStartNewGame) {
          newGame();
        }
    }

    //If the game isn't over run the code
    if (!gameOver) {

    //Create new pipes every 60 frames (1 second)

    //Get rid of pipes when they reach the left side of screen

    //remove points when bird eats it
    
    
        //Wrap ground 
        if (camera.x > ground.x + width / 2) {
            ground.x += width;
            sky.x +=width
        }
        
    }

  //The camera follows the bird's x axis movement
    camera.x = bird.x + 150;
    
    // Adjust the position of the sky based on the camera's position
    let skyX = skybg.width / 2 - camera.x * 0.2;
    image(skybg, skyX, 0);

    camera.on();

    if (!gameOver) {
          camera.x = bird.x + 150;
          world.step();
    }
    text("score : " + score, bird.x, bird.y);

}

The text that I am trying to add is : text("score : " + score, bird.x, bird.y); on the last line of function draw()

I was unable to run the code that you posted. Have you considered using createDiv()?

let txt;

function setup() {
 createCanvas(400, 400);
 txt = createDiv('');
 txt.style('font-size', '16px');
 txt.position(30, 60);
}

function draw() {
  if (frameCount % 100 == 0){
    txt.html('score: '+str(int(random(255))));
    background(random(255,100));  
  }  
}