console.log("Begining animation");


const canvas = document.getElementById("maincanvas");
const ctx = canvas.getContext("2d");

const width = canvas.width;
const height = canvas.height;

const barWidth = 10;
const barHeight = 40;

const barColor = "#33DDFF";



const clearToBackground = (ctx) => {
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = "blue";
    ctx.fillRect(0,0, width, height);
};

// cornerX, Y represent upper-left corner of bounding box
const drawBar = (ctx, cornerX, cornerY) => {
    const halfway = barWidth / 2;

    ctx.fillStyle = barColor;

    //TODO stroke arc for corners
    ctx.beginPath();
    ctx.moveTo(cornerX, cornerY + halfway);
    ctx.lineTo(cornerX, cornerY + halfway + barHeight);
    ctx.lineTo(cornerX + barWidth, cornerY + halfway + barHeight);
    ctx.lineTo(cornerX + barWidth, cornerY + halfway);
    ctx.closePath();
    ctx.fill();



}

clearToBackground(ctx);
drawBar(ctx, 20, 20);
drawBar(ctx, 40, 20);