why does my arc doesn't grow every frame?-CodePudding

I am trying to make an animation of a sunrise, so for that i need a circle that grows in size. At the moment i'm using an arc, but my sun isnt growing every frame so it just stays static. I've tried calling another function but I'm not sure how to do that or if the code I've already made is missing something. This is the code I've written so far.

<!doctype html>
<html>

<head>
  <title>Animacion</title>
</head>

<body onl oad="call()">
  <!--canvas-->
  <canvas id="canvas" width="300" height="300" style="border: 1px solid black"></canvas>
  <script>
    function call() {
      window.requestAnimationFrame(draw);
    }

    function draw() {
      //context
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.globalCompositeOperation = 'destination-over';
      ctx.clearRect(0, 0, 300, 300);
      ctx.fillStyle = "green";
      ctx.strokeStyle = "green";
      ctx.save();

      //ground
      ctx.beginPath();
      ctx.rect(0, 200, 300, 100);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      ctx.save();

      //sun size    
      var sunSize = 50;
      //sun
      ctx.beginPath();
      ctx.strokeStyle = "yellow";
      ctx.fillStyle = "yellow";
      ctx.arc(145, 220, sunSize, sunSize, 0, Math.PI * 2, true);
      ctx.fill();
      ctx.stroke();
      sunSize = sunSize   5;
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      ctx.save();
      //sky
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = "cyan";
      ctx.fillStyle = "cyan";
      ctx.rect(0, 0, 300, 300);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
      ctx.save();


      window.requestAnimationFrame(draw);
    }
    call();
  </script>
</body>

</html>

I've tried using another function inside of the draw() but it basically does nothing and erases the sky i have.

CodePudding user response：

you initalize sunSize inside your draw() function so it resets the sunSize to 50 every time it runs. move the sunSize outside the draw function below the <script> part here;

<script>
      var sunSize = 50;
        function call(){
            window.requestAnimationFrame(draw);
        }
etc, etc

also, instad of using sunSize = sunSize 5 use sunSize = 5. they mean the exact same thing just written faster. 5 may be a bit fast though. try using 0.1 or 0.2