Анимации(canvas)

На экране шарик со случайным цветом,который двигается в разных направлениях и отбивается от стен.
Каждые 200 миллисекунд появляется ещё 1 шарик, у которого есть случайный цвет и двигается в случайном направлении.
Максимальное количество шариков не должно превышать 20.

Помогите пожалуйста понять и реализовать задачу.
Вот код которым смог решить первую часть задачи:

class GraphicTools{
    constructor(){
        this.canvas=document.querySelector('canvas')
        this.ctx=this.canvas.getContext('2d')
    }
}

class Ball extends GraphicTools{
    constructor(){
        super()
        this.x=50;
        this.y=50;
        this.z=20;
        this.dx=1;
        this.dy=1;
    }

    move(){
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)
        if(this.x>this.canvas.width||this.x<0){
            this.dx=-this.dx
        }
        if(this.y>this.canvas.height||this.y<0){
            this.paint()
            this.dy=-this.dy
        }
        this.x+=this.dx
        this.y+=this.dy
        this.paint()
    }

    paint(){
        this.ctx.beginPath()
        this.ctx.fillStyle='red'
        this.ctx.arc(this.x,this.y,this.z,0,6.28)
        this.ctx.fill()
        this.ctx.closePath()
    }
}

class Animation{
    static start(){
        let ball=new Ball()
        ball.paint()
       setInterval(function(){
           ball.move();
       },0)
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="margin: 0">
 <canvas height="600" width="1366" style="background: yellowgreen"></canvas>
   
  <script>
    Animation.start()
    </script> 
</body>
</html>

setInterval в котором инкрементируешь счетчик мячиков, создаешь мячик если счетчик меньше 20.