write some comment and rewrite

main.js

@@ -1,36 +1,14 @@
 const canvas = document.getElementById("c");
-const ctx = canvas.getContext("2d");
+const c = canvas.getContext("2d");
+
+const imageWidth = 100;
+const imageHeight = 100;
+const columns = Math.floor(canvas.width / imageWidth);
+const totalImageCount = 100;
 
-const img = new Image();
-img.src = "./images/1.jpg";
-const thumbW = 100;
-const thumbH = 100;
-const gap = 10;
-const columns = Math.floor(canvas.width / (thumbW + gap));
-const count = 100;
 let scrollTop = 0;
 let selectedIndex = -1;
 
-canvas.addEventListener("wheel", (e) => {
-  scrollTop += e.deltaY;
-  const rows = Math.ceil(count / columns);
-  const contentHeight = rows * (thumbW + gap);
-
-  let maxScroll = contentHeight - canvas.height;
-  if (maxScroll < 0) maxScroll = 0;
-
-  if (scrollTop < 0) scrollTop = 0;
-  if (scrollTop > maxScroll) scrollTop = maxScroll + 10;
-
-  render();
-});
-
-canvas.addEventListener("click", handleClick);
-
-img.onload = () => {
-  render();
-};
-
 function getMousePos(e) {
   const rect = canvas.getBoundingClientRect();
   return {
@@ -39,49 +17,73 @@ function getMousePos(e) {
   };
 }
 
-function handleClick(e) {
+function unselectImage() {
-  const pos = getMousePos(e);
+  selectedIndex = -1;
-  const mouseX = pos.x;
+  canvas.removeEventListener("click", unselectImage);
-  const mouseY = pos.y;
+  canvas.addEventListener("click", handleClick);
+  render();
+}
 
-  for (let i = 0; i < count; i++) {
+function handleClick(e) {
+  const { x: mouseX, y: mouseY } = getMousePos(e);
+
+  for (let i = 0; i < totalImageCount; i++) {
     const row = Math.floor(i / columns);
     const col = i % columns;
 
-    const x = col * (thumbW + gap);
+    const x = col * imageWidth;
-    const y = row * (thumbH + gap) - scrollTop;
+    const y = row * imageHeight - scrollTop;
 
     if (
       mouseX >= x &&
-      mouseX <= x + thumbW &&
+      mouseX <= x + imageWidth &&
       mouseY >= y &&
-      mouseY <= y + thumbH
+      mouseY <= y + imageHeight
     ) {
       selectedIndex = i;
+      canvas.removeEventListener("click", handleClick);
+      canvas.addEventListener("click", unselectImage);
       render();
       return;
     }
   }
 }
 
-function render() {
+canvas.addEventListener("click", handleClick);
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-  for (let i = 0; i < count; i++) {
+canvas.addEventListener("wheel", (e) => {
-    const totalWidth = columns * (thumbW + gap) - gap;
+  scrollTop += e.deltaY;
-    const startX = (canvas.width - totalWidth) / 2;
+
+  const rows = Math.ceil(totalImageCount / columns);
+  const contentHeight = rows * imageHeight;
+
+  const maxScroll = Math.max(0, contentHeight - canvas.height);
+
+  scrollTop = Math.min(Math.max(scrollTop, 0), maxScroll);
+
+  render();
+});
+
+const img = new Image();
+img.src = "./images/1.jpg";
+img.onload = () => render();
+
+function render() {
+  c.clearRect(0, 0, canvas.width, canvas.height);
+
+  if (selectedIndex >= 0) {
+    c.drawImage(img, 0, 0, canvas.width, canvas.height);
+    return;
+  }
+
+  for (let i = 0; i < totalImageCount; i++) {
     const row = Math.floor(i / columns);
     const col = i % columns;
 
-    const x = startX + col * (thumbW + gap);
+    const x = col * imageWidth;
-    const y = row * (thumbH + gap) - scrollTop;
+    const y = row * imageHeight - scrollTop;
 
-    ctx.drawImage(img, x, y + 10, thumbW, thumbH);
+    c.drawImage(img, x, y, imageWidth, imageHeight);
+  }
+}
 
-    if (i === selectedIndex) {
-      ctx.strokeStyle = "red";
-      ctx.lineWidth = 4;
-      ctx.strokeRect(x, y + 10, thumbW, thumbH);
-    }
-  }
-}