Fibonacci Code

// These variables have been globally scoped so they can be
// modified outside of the drawFlower() and animate() functions
const flower1 = document.getElementById('flower1');
const ctx1 = flower1.getContext('2d');
divHeight = document.getElementById('flower1').clientHeight;
divWidth  = document.getElementById('flower1').clientWidth;
flower1.height = divHeight;
flower1.width = divWidth;
// 'destination-over' parameter means that what is drawn
// will appear behind whatever is already drawn to the canvas
ctx1.globalCompositeOperation = 'destination-over'

let number1 = 250;
let scale1 = 20;

function drawFlower1() {
    let angle = number1 * 8;
    let radius = scale1 * Math.sqrt(number1);
    let x = radius * Math.sin(angle) + flower1.width/2;
    let y = radius * Math.cos(angle) + flower1.height/2;
    let size = 30

    ctx1.fillStyle = '#ec5a7d';
    ctx1.strokeStyle = '#ffce5c';
    document.Onlo
    ctx1.lineWidth = 9;
    ctx1.beginPath();
    ctx1.arc(x, y, size, 0, Math.PI * 2);
    ctx1.closePath();
    ctx1.fill();
    ctx1.stroke();

    number1--;
}

function animate1(){
    drawFlower1();
    // request animation recalls itself as a parameter
    // to make a recursive loop
    requestAnimationFrame(animate1);
}

animate1();