small refactor and reformat

main.js

@@ -1,28 +1,9 @@
-
-function drawCross(ctx, hue) {
-  ctx.beginPath();
-  ctx.moveTo(200, 200);
-  ctx.lineTo(300, 300);
-  ctx.moveTo(300, 200);
-  ctx.lineTo(200, 300);
-  ctx.lineWidth = 5;
-  ctx.strokeStyle = `hsla(${hue}, 100%, 50%, 1)`;
-  ctx.stroke();
-}
-
-function drawCircle(ctx) {
-  ctx.beginPath();
-  // arc(x, y, radius, startAngle, endAngle)
-  ctx.arc(75, 75, 50, 0, Math.PI * 2);
-  ctx.stroke();
-}
-
 let startTime = undefined;
 
 let shapes = [];
 let pendingClicks = [];
 
-function animate(ctx, time) {
+function update(ctx, time) {
     if (!startTime) {
         startTime = time;
     }
@@ -50,7 +31,7 @@ function animate(ctx, time) {
         }
     }
 
-	window.requestAnimationFrame(time => animate(ctx, time));
+    window.requestAnimationFrame(time => update(ctx, time));
 }
 
 function drawAnimatedCircle(ctx, dt, x, y, hue) {
@@ -98,9 +79,6 @@ function init() {
         const ctx = canvas.getContext("2d");
         resizeCanvas(ctx); // Init canvas
 
-			window.addEventListener('resize', () => resizeCanvas(ctx));
-			window.requestAnimationFrame(time => animate(ctx, time))
-			
         canvas.addEventListener("click", (evt) => {
             const {clientX, clientY} = evt;
             pendingClicks.push({x: clientX, y: clientY, kind: "circle"});
@@ -111,6 +89,9 @@ function init() {
             const {clientX, clientY} = evt;
             pendingClicks.push({x: clientX, y: clientY, kind: "cross"});
         });
+
+        window.addEventListener('resize', () => resizeCanvas(ctx));
+        window.requestAnimationFrame(time => update(ctx, time))
     }
 }