每点击一次按钮，在画布的随机地方出现一个圆向右下移动。

下面贴了body的代码，要用列表，怎么出现多个圆？求解

    <canvas width="640" height="480"></canvas>
    <br><button id="btn"></button>
     <script>
        let circles=[];
        let id=null;
        let x=parseInt(Math.random()*640);
        let y=parseInt(Math.random()*480);
        let c={x,y,r:40};
        const cv=document.querySelector("canvas");
        const gc=cv.getContext("2d");
        const btn=document.querySelector("#btn");
        btn.addEventListener('click',()=>{
            for(let i=0;i<circles.length;i++){
            if(id==null){
                id=setInterval(draw,7);
                }
            circles.push[i];
            }
            
        })
        function draw(){
            c.x +=1;
            c.y +=1;
            gc.clearRect(0,0,cv.width,cv.height);
            gc.beginPath();
            gc.lineWidth=5;
            gc.strokeStyle="blue";
            gc.arc(c.x,c.y,c.r,0,2*Math.PI);
            gc.stroke();
    }
    </script>

    <canvas width="640" height="480"></canvas>
    <br><button id="btn">按钮</button>
     <script>
        let circles=[];
        let id=null;
        const cv=document.querySelector("canvas");
        const gc=cv.getContext("2d");
        const btn=document.querySelector("#btn");
        btn.addEventListener('click',()=>{
            if(id==null){
                id=setInterval(draw,7);
            }
            let x=parseInt(Math.random()*640);
            let y=parseInt(Math.random()*480);
            let c={x,y,r:40};
            circles.push(c);
        });
        function draw(){
            gc.clearRect(0,0,cv.width,cv.height);
            circles.forEach(function(c){
                c.x +=1;
                c.y +=1;
                gc.beginPath();
                gc.lineWidth=5;
                gc.strokeStyle="blue";
                gc.arc(c.x,c.y,c.r,0,2*Math.PI);
                gc.stroke();
            });
    }
    </script>