我的for循环为什么不起作用？只能画出一个星星

$("#sky").bind("click",function () {
           for (var i = 0; i < 200; i++) {
               var r = Math.random() * 10 + 10;
               var x = Math.random() * canvas.width;
               var y = Math.random() * canvas.height;
               var a = Math.random() * 360;
               sky(x, y, r, r / 2, a);
           }
       }
   )
function sky(x,y,outerR,innerR,rot){
   var canvas = document.getElementById("canvas");
   canvas.width = 1600;
   canvas.height = 700;
   var context=canvas.getContext("2d");
   context.fillStyle="black";
   context.fillRect(0,0,canvas.width,canvas.height);
   context.beginPath();
   for(var i=0;i<5;i++){
       context.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*outerR+x,
               -Math.sin((18+i*72-rot)/180*Math.PI)*outerR+y);
       context.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*innerR+x,
               -Math.sin((54+i*72-rot)/180*Math.PI)*innerR+y);
   }
   context.closePath();
   context.fillStyle="#fb3"
   context.strokeStyle="#fd5"
   context.lineWidth=3;
   context.lineJoin="round";
   /* 线的三种相交方式  bevel round
    context.lineJoin="bevel";    */
   context.fill();
   context.stroke();
}