ball-animation-outline.js

// global variables that will be loaded/initialized later
let canvas, ctx, gravity, ball, friction

// runs once at the beginning
// loads any data and kickstarts the loop
function init () {
  // load and initialize data here
  // ...

  // begin update loop
  // ...
}

// draws stuff to the screen
// allows us to separate calculations and drawing
function draw () {
  // clear the canvas
  // ...
  
  // draw things
  // ...
}

// the main piece of the loop
// runs everything
function update () {
  // queue the next update
  // ...

  // logic goes here
  // ...

  // draw after logic/calculations
  draw()
}