feat: add grid gap & canvas outline

index.html

@@ -31,6 +31,11 @@
         <input id="scale" type="number" min="1" value="40">
         px per module
       </label>
+      <label for="gap">
+        <span>Grid gap:</span>
+        <input id="gap" type="number" min="0" value="0">
+        px between modules
+      </label>
       <button id="gen-btn">Generate</button>
     </div>
     <div>

script.js

@@ -57,23 +57,26 @@ addEventListener('DOMContentLoaded', () => {
     size: document.getElementById("width"),
     ver: document.getElementById("version"),
     scale: document.getElementById("scale"),
+    gap: document.getElementById("gap"),
   }
 
   document.getElementById("gen-btn").addEventListener("click", () => {
     const mask = options.mask.value
-    const size = options.size.value
-    const scale = options.scale.value
+    const size = Number(options.size.value)
+    const scale = Number(options.scale.value)
+    const gap = Math.min(Number(options.gap.value), scale) // not more than 1 module scaled size
+
+    const wh = scale - gap * 2 // width&height for 1 module with grid gap
 
     canvas.width = canvas.height = size * scale
 
     ctx.clearRect(0, 0, canvas.width, canvas.height)
-
     ctx.fillStyle = "black"
 
     for (let row = 0; row < size; row++) {
       for (let col = 0; col < size; col++) {
         if (eval(mask) == 0) {
-          ctx.fillRect(col * scale, row * scale, scale, scale)
+          ctx.fillRect(col * scale + gap, row * scale + gap, wh, wh)
         }
       }
     }

style.css

@@ -3,14 +3,17 @@ body {
   padding: 0.5rem;
 }
 
-#options {
+body > div {
+  width: fit-content;
+  margin: auto;
+}
+
+body > div#options {
   display: flex;
   flex-direction: column;
   row-gap: 0.25rem;
 
-  width: fit-content;
   max-width: calc(100vw - 0.5rem * 2);
-  margin: auto;
 }
 
 select, input, button {
@@ -20,7 +23,7 @@ select, input, button {
 }
 
 input[type=number] {
-  width: calc(1rem * 4 + 0.125rem * 2);
+  width: calc(4rem + 0.125rem * 2);
 }
 
 label {
@@ -35,6 +38,11 @@ label#width-wrapper > button {
 }
 
 label > span:nth-child(1) {
-  width: calc(3.5rem);
+  width: 5rem;
   text-align: right;
 }
+
+canvas {
+  margin-top: 0.5rem;
+  border: 2px solid #555;
+}