Add random rectangle in canvas (snake)

I created a snake game and I'm stuck on some of the code, I wish that before the game begins, add random obstacles in the canvas but it disappears when the game begins (after the init)

I want the user to add from a button a random square (obstacle) that stays in the canvas so that when the snake moves, it avoids the squares.

I put you a picture of the game to show you what it should look like img created in paint

Here is the function, onload and init :

window.onload = function() 
{
    
    var body = document.getElementsByTagName("body")[0];
    var canvasWidth = 900;
    var canvasHeight = 600;
    var blockSize = 30;
   
    var ctx; // contexte

    var delay = 100 ; 
    var snakee;
    var applee;
   
    var canvas = document.createElement("canvas");
    canvas.height = 599;
    canvas.width = 899;
    var ctx = canvas.getContext("2d");
    canvas.style.border = "15px solid black";
    canvas.style.margin = "50px auto";
    canvas.style.display = "block";
    canvas.style.backgroundColor = "#ddd";
    body.appendChild(canvas);
    
    var widthInBlocks = canvasWidth/blockSize; 
    var heightInBlocks = canvasHeight/blockSize; 
          
    document.getElementById('init').addEventListener('click', init);
    document.getElementById('buttonRandom').addEventListener('click', create);  
   
    function init()
    {
        document.body.appendChild(canvas);
        ctx = canvas.getContext('2d');
        snakee = new Snake([[7,4],[6,4],[5,4],[4,4],[3,4]], "right");
        applee = new Apple([12,9]);
        
        score = 0;
        refreshCanvas();
    }

Here is the function create, it works but only before the beginning of the game :

function create(position) {
        this.body = position;
        this.draw = function()
        {
            ctx.save();
        
            ctx.fillStyle = '#000000';
            ctx.beginPath();
            
        }
        
               
            ctx.fillRect(Math.random()*canvas.width, Math.random()*canvas.width, Math.random()*20+20, Math.random()*20+20);
            ctx.fill(); 

    }

I do not find how to make them appear in the canvas when the game started without them disappearing

EDIT :

I drew the snake, the apple and the score in the function refresh canvas

I must surely add in but I do not know how

function refreshCanvas()
{
    snakee.advance();
    if(snakee.checkCollision())
    {
        gameOver();

    }

        else 
    {
        if(snakee.isEatingApple(applee))
        {
           score ++;
           snakee.ateApple = true;
            do 
           {
            applee.setNewPosition();
           }
           while(applee.isOnSnake(snakee))
        
        }
        
      
        ctx.clearRect(0,0, canvasWidth, canvasHeight);
        drawScore();
        snakee.draw();
        applee.draw();
        
        
        timeout = setTimeout(refreshCanvas,delay);  
    }
}

It is this code which makes appear the elements on the screen?

function drawScore()
       {
        ctx.save();
        ctx.font = "bold 80px sans-serif";
        ctx.fillStyle = "black";
        ctx.textAlign = "center";
        ctx.textBaseLine = "middle";
        var centreX = canvasWidth/ 2;
        var centreY = canvasHeight/ 2;
        ctx.fillText(score.toString(),centreX,centreY);
        ctx.restore();
       }
       
       function drawBlock(ctx, position)
    {
        var x = position[0] * blockSize;
        var y = position[1] * blockSize;

       
        ctx.fillRect(x ,y , blockSize, blockSize);
    }

Thanks in advance!