fix: revert opacity background color

Author: dy0gu

scripts/main.js

@@ -26,7 +26,7 @@ window.addEventListener("load", main, false);
 
 function drawCanvas(canvas, ctx) {
   const { currentColorIndex, bgColors } = state;
-  ctx.font = "24px monospace";
+  ctx.font = "25px monospace";
   ctx.fillStyle = `rgba(${bgColors[currentColorIndex].join(", ")}, 1)`;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
@@ -43,7 +43,7 @@ function resizeCanvas(canvas, ctx) {
 function drawLines(canvas, ctx) {
   const { currentColorIndex, txtColors } = state;
   const margin = canvas.height / 20;
-  const stroke = 2;
+  const stroke = (canvas.height * canvas.width) / 400000;
 
   ctx.fillStyle = `rgba(${txtColors[currentColorIndex].join(", ")}, 1)`;
 
@@ -90,6 +90,7 @@ async function fadeCanvas(canvas, ctx) {
       out = true;
     }
     canvas.style.opacity = op;
+    canvas.style.filter = "alpha(opacity=" + op * 100 + ")";
     op += (out ? -1 : 1) * 0.01;
   }, 50);
 }
@@ -109,17 +110,19 @@ function main() {
     drawCanvas(canvas, ctx);
     resizeCanvas(canvas, ctx);
     fadeCanvas(canvas, ctx);
-  });
 
-  window.addEventListener("resize", () => resizeCanvas(canvas, ctx), false);
+    document.body.style.backgroundColor = "white";
 
-  canvas.addEventListener("click", () => {
-    state.currentColorIndex = (state.currentColorIndex + 1) % state.bgColors.length;
-    drawCanvas(canvas, ctx);
-  }, false);
-  canvas.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      canvas.click();
-    }
-  }, false);
+    window.addEventListener("resize", () => resizeCanvas(canvas, ctx), false);
+
+    canvas.addEventListener("click", () => {
+      state.currentColorIndex = (state.currentColorIndex + 1) % state.bgColors.length;
+      drawCanvas(canvas, ctx);
+    }, false);
+    canvas.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        canvas.click();
+      }
+    }, false);
+  });
 }

styles/globals.css

@@ -3,20 +3,15 @@ body {
   height: 100dvh;
   margin: 0;
   border: 0;
+  display: block;
   overflow: hidden;
   overscroll-behavior-y: none;
   touch-action: manipulation;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: bold;
   background-color: rgb(0, 100, 72);
 }
 
 canvas {
   position: absolute;
-  width: 100%;
-  height: 100%;
   left: 0;
   top: 0;
   cursor: pointer;