为什么我的星星的绘制幅度是HTML5画布上的两倍？

Question

作为我国旗的最后一部分，我需要为我的美国国旗环绕一颗星50次，以免我创造新的50颗新星的麻烦。我已经研究出如何在一个循环中创造50颗星，唯一的问题是，它们的出现量是另一个的两倍。有人能在我的代码中发现问题吗？

  class Star extends drawable{
  constructor(x = 0,y = 0, outerRadius = 0, innerRadius = 0, numberOfPoints = 0, lineWidth = 0,fillStyle = "#000",strokeStyle = "transparent",context){
    super(context,x,y,fillStyle,strokeStyle,lineWidth);
    this.outerRadius = outerRadius;
    this.innerRadius = innerRadius;
    this.numberOfPoints = numberOfPoints;
}
loopDraw(){
    super.draw();
    this.context.beginPath(); 
    this.numberOfPoints = this.numberOfPoints * 2; //
    let pointOffSetRadians = (2 * Math.PI) / this.numberOfPoints; //
    for(var p = 0; p < 4; p++){
        this.context.moveTo((this.x + 40) * p,this.y - this.outerRadius); 
        for(let i = 0; i < this.numberOfPoints; i++){
            let radX,radY;
            if(i % 2 === 0){
                radX = this.outerRadius * Math.sin(i * pointOffSetRadians);
                radY = this.outerRadius * Math.cos(i * pointOffSetRadians) * -1;
            } else {
                radX = this.innerRadius * Math.sin(i * pointOffSetRadians);
                radY = this.innerRadius * Math.cos(i * pointOffSetRadians) * -1; 
            }   
                this.context.lineTo((radX + this.x + 40)*p, radY + this.y);         
        }
    }

    this.context.closePath(); 
    this.context.stroke(); 
    this.context.fill(); 
    super.afterDraw();  
}
}
const star1 = new Star(24,130,18,7,5,0,"white","green",context4);
star1.loopDraw();