1 files changed, 28 insertions, 28 deletions

diff --git a/main.js b/main.js
index 4aa2009..9bf6823 100644
--- a/main.js
+++ b/main.js
@@ -57,25 +57,25 @@ document.body.onkeydown = (e) => {
 
 let lastCanvasSize = 0;
 
-const updateBackground = (canvasSize) => {
-  bg.strokeStyle = '#b9bdc1';
-  bg.strokeWidth = 1.5;
+const updateForeground = (canvasSize) => {
+  fg.strokeStyle = '#b9bdc1';
+  fg.strokeWidth = 1.5;
 
-  bg.canvas.width = bg.canvas.width;
-  bg.translate(canvasSize/2, canvasSize/2);
+  fg.canvas.width = fg.canvas.width;
+  fg.translate(canvasSize/2, canvasSize/2);
 
   const rad = Math.ceil(canvasSize / size / 3);
   for (let q = -rad; q <= rad; q++) {
     const rMin = Math.max(-rad, -q-rad);
     const rMax = Math.min(rad, rad-q);
     for (let r = rMin; r <= rMax; r++) {
-      bg.save();
-      bg.translate(...hex2px([q, r]));
+      fg.save();
+      fg.translate(...hex2px([q, r]));
 
-      hexagon(bg);
-      bg.stroke();
+      hexagon(fg);
+      fg.stroke();
 
-      bg.restore();
+      fg.restore();
     }
   }
 };
@@ -91,21 +91,21 @@ const draw = () => {
     fg.canvas.width = fg.canvas.height = canvasSize;
     lastCanvasSize = canvasSize;
     
-    updateBackground(canvasSize);
+    updateForeground(canvasSize);
   }
   
-  fg.canvas.width = fg.canvas.width;
+  bg.canvas.width = bg.canvas.width;
 
   layout.update();
   
-  fg.translate(canvasSize/2, canvasSize/2);
+  bg.translate(canvasSize/2, canvasSize/2);
 
-  fg.font = `${size*0.5}px sans-serif`;
-  fg.textAlign = 'center';
+  bg.font = `${size*0.5}px sans-serif`;
+  bg.textAlign = 'center';
+  bg.textBaseline = 'middle';
 
-  fg.strokeStyle = '#ff0000';
-  fg.strokeWidth = 5;
-  
+  bg.strokeStyle = '#ff0000';
+  bg.strokeWidth = 5;
   
   const rot = layout.getRot();
   const [qq, rr] = layout.getSteps();
@@ -118,29 +118,29 @@ const draw = () => {
     const rMin = Math.max(-rad, -q-rad);
     const rMax = Math.min(rad, rad-q);
     for (let r = rMin; r <= rMax; r++) {
-      fg.save();
-      fg.translate(...hex2px([q, r]));
+      bg.save();
+      bg.translate(...hex2px([q, r]));
 
       const note = q*qq + r*rr;
       let step = note % length;
       step = (step + length) % length;
       
       if (steps.includes(note)) {
-        fg.fillStyle = '#eeeeee';
-        hexagon(fg);
-        fg.fill();
+        bg.fillStyle = '#eeeeee';
+        hexagon(bg);
+        bg.fill();
       }
       
-      fg.rotate(-rot);
-      fg.fillStyle = '#303336';
-      fg.fillText(step, 0, size/3);
+      bg.rotate(-rot);
+      bg.fillStyle = '#303336';
+      bg.fillText(step, 0, 0);
 
-      fg.restore();
+      bg.restore();
     }
   }
   
   // const mouse = px2hex(rotate(mousePos, rot));
-  // fg.arc(...hex2px(mouse), 10, 0, 2*Math.PI);
+  // bg.arc(...hex2px(mouse), 10, 0, 2*Math.PI);
   
   document.body.style.setProperty('--global-rot', `${rot}rad`);
   requestAnimationFrame(draw);