// create a CanvasAnimater object that targets a canvas element with id='myCanvas'
let canvasAnimater = new CanvasAnimater('myCanvas');

// get the '2D' rendering canvas context
let ctx = canvasAnimater.context;

// set the canvas width and height dimensions to 300x300
// NOTE: this setting is bypassed if canvas is flexed
canvasAnimater.size(300,300)

// flex the canvas to fill the entire window
canvasAnimater.flex(true);

// declare a global time variable to parameterize motion
let time = 0;
let rate = 0.01;

// define and set a draw function that draws a black background and a white disk moving in a circle
canvasAnimater.draw = function () {
    
    let W = canvasAnimater.width;
    let H = canvasAnimater.height;
    
    // draw a black background
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, W, H); 
  
    // define a radius for the circular path the disk follows
    let R = Math.min(W,H)/4;
  
    // draw a white disk that moves in a circle  
    ctx.beginPath();
    ctx.arc(W/2 + R*Math.sin(time), H/2 - R*Math.cos(time), R/4, 0, 2*Math.PI);
    ctx.closePath();
    ctx.fillStyle = 'white';
    ctx.fill();
  
    // increment time variable at specified rate  
    time += rate;
  
}

// set the render rate in frames-per-second
canvasAnimater.FPS(24);

// render the animation
canvasAnimater.animate();