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 onload="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.
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