commit 4987ca4594a3f65b489c44a5e02c917ea662bc98 Author: Greg Shuflin Date: Tue Feb 28 01:28:53 2023 -0800 Initial commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..589338b --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + + + +

Beamsweep

+ +

+ + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..8fa1339 --- /dev/null +++ b/main.js @@ -0,0 +1,44 @@ +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);