const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d')
const CANVAS_WIDTH = canvas.width = 1024
const CANVAS_HEIGHT = canvas.height = 576

//fillRect() is a method of the 2d drawing context object.
c.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT)
const gravity = 0.5

//adding the {} within () allows the values to operate without it having to be in order.

    const backgroundLayer1 = new Sprite({
        position: {
            x: 0,
            y: 0
        },
        imageSrc: './img/background/background_layer_1.png', 
    })

    const backgroundLayer2 = new Sprite({
        position: {
            x: 0,
            y: 0,
        },
        
        imageSrc: './img/background/background_layer_2.png', 
    })

    const backgroundLayer3 = new Sprite({
        position: {
            x: 0,
            y: 0
        },
        imageSrc: './img/background/background_layer_3.png', 
    })
    .
    .
    .
    function animate() {
    window.requestAnimationFrame(animate)
    c.fillStyle = "black"
    c.clearRect(0, 0, canvas.width, canvas.height)
    backgroundLayer1.update()
    backgroundLayer2.update()
    backgroundLayer3.update()
    }