Untitled

function createStar( x, y, scale = 1.0 ) {
    return {
      dx: 2 * Math.random() - 1,
      dy: 2 * Math.random() - 1,
      x: x,
      y: y,
      scale: scale
      
    };
  }
  
  // createStar(10,20) wird z. B. ein Objekt
  // {x: 10, y: 20, dx: 0.360, dy: -0.226 } liefern.
  
  
  const stars = [];

  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  const constraintX = canvas.width;
  const constraintY = canvas.height;

  for(let i = 0; i < 100; i++) {
    const coordX = Math.floor(Math.random() * constraintX);
    const coordY = Math.floor(Math.random() * constraintY);
    stars.push(createStar(coordX, coordY, 0.1));
  }
  
  // Aufgabe: Initialisiere das Array mit 100 "stars" und zufälligen Koordinaten.
  
  function drawStars() {
   // Aufgabe: Zeiche die Sterne mit (x,y) auf den Canvas.
   // Optional: Zeichne den Stern als Kreis mit
   // ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2); ctx.closePath(); ctx.fillStyle = '#FF0000'; ctx.fill();
    for(let star of stars) {
            ctx.beginPath();
            ctx.moveTo(star.x, star.y);
            ctx.lineTo(star.x + 20 * star.scale, star.y + 70 * star.scale);
            ctx.lineTo(star.x + 90 * star.scale, star.y + 70 * star.scale);
            ctx.lineTo(star.x + 35 * star.scale, star.y + 110 * star.scale);
            ctx.lineTo(star.x + 60 * star.scale, star.y + 180 * star.scale);
            ctx.lineTo(star.x, star.y + 140 * star.scale);
            ctx.lineTo(star.x - 60 * star.scale, star.y + 180 * star.scale);
            ctx.lineTo(star.x - 35 * star.scale, star.y + 110 * star.scale);
            ctx.lineTo(star.x - 90 * star.scale, star.y + 70 * star.scale);
            ctx.lineTo(star.x - 20 * star.scale, star.y + 70 * star.scale);
            ctx.closePath();
            ctx.fillStyle = "gold";
            ctx.fill();
    }
        
  }