Infinite spawning appearing on canvas

[paulinal3]

What's the problem you're trying to solve?

Randomly spawning of only 10 food items

Post any code you think might be relevant (one fenced block per file)

const foodImg = new Image()
foodImg.src = ('../js/images/foodPixil.png')

function foodElem(url, x, y) {
    this.url = url
    this.x = x
    this.y = y
    this.alive = true

    this.render = function() {
        ctx.drawImage(this.url, this.x, this.y)
    }
}

let food = new foodElem(foodImg, (Math.random()*300), (Math.random()*150))
const foodNum = 10

let foodArr = []
function addFood () {
    for (i = 0; i <= 10; i++) {
    let food = new foodElem(foodImg, (Math.random()*300), (Math.random()*150))
    foodArr.push(food)
    // console.log(x)
    }
}

console.log(foodArr)

function createFood() {
    addFood()
    let newFood = {}
    for (let i = 0; i < foodArr.length; i++) {
        newFood = foodArr[i]
        // newFood.render()
    }
}

function(animate) {
    ctx. clearRect(0, 0, canvas.width, canvas.height)
    createFood()
    drawPlayer(manateeImg, player.x, player.y, player.width, player.height)
    requestAnimationFrame(animate)
}

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

Infinitely spawning instead of just creating 10

What is your best guess as to the source of the problem?

I think there's something wrong with my for loop

What things have you already tried to solve the problem?

Changing what 'i' should be less than, changing around the code block, and a lot of google fu