Есть ли способ решить "Uncaught TypeError: Не удается прочитать свойство undefined в JavaScript"?

Question

Я новичок в Js, только начатый день назад. Я понятия не имею об этом, и его паттерн действительно выводит меня из себя, так как я из Python и C # фона. В любом случае, я пытаюсь создать много кругов, пытаясь создать массив объектов из него, но он продолжает давать мне эти ошибки. Хотя когда я работаю только на один объект, это прекрасно работает. Я понятия не имею, что делать, я посмотрел вверх и обнаружил, что неопределенное означает, что некоторые не инициализированы, но все кажется мне определенным. Пожалуйста, помогите мне немного

[! [Сообщение об ошибке] [1]] [1]

canvas.height = window.innerHeight
canvas.width = window.innerWidth

var c = canvas.getContext('2d')


function circle(x,y, dx,dy, radius){
    this.x = x
    this.y = y
    this.dx = dx
    this.dy = dy
    this.radius = radius

    this.draw = function(){
        c.beginPath()
        c.arc(this.x,this.y, this.radius, 0, Math.PI * 2, false)
        c.strokeStyle = "blue"
        c.stroke();
    }

    this.update = function() {
        if( (this.x + this.radius > innerWidth) || (this.x - this.radius < 0))
        {
            this.dx = -this.dx
        }

        if( (this.y + this.radius > innerHeight) || (this.y - this.radius < 0))
        {
            this.dy = -this.dy
        }

        this.x += this.dx
        this.y += this.dy

        this.draw();

        }
}


var CircleArray = []

for(var i = 0 ; i < 10; i++)
{
    var x = Math.random() *  innerWidth
    var y = Math.random() *  innerHeight

    var dx = 4
    var dy = 4

    var radius = 30

    CircleArray.push(new circle(x,y,dx,dy, radius))

}

function animate()
{
    requestAnimationFrame(animate)
    c.clearRect(0,0, innerWidth, innerHeight)

    for(var j = 0 ; j < CircleArray.length; j++)
    {
        CircleArray[i].update()
    }

}
animate()```


  [1]: https://i.stack.imgur.com/qWQto.png