45 lines
967 B
JavaScript
45 lines
967 B
JavaScript
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);
|