index.html

@@ -34,7 +34,7 @@
       <label for="gap">
         <span>Grid gap:</span>
         <input id="gap" type="number" min="0" value="0">
-        px around
+        px between modules
       </label>
       <button id="gen-btn">Generate</button>
     </div>

script.js

@@ -64,9 +64,7 @@ addEventListener('DOMContentLoaded', () => {
     const mask = options.mask.value
     const size = Number(options.size.value)
     const scale = Number(options.scale.value)
-    // not more than (half of 1 scaled module size) - 1
+    const gap = Math.min(Number(options.gap.value), scale) // not more than 1 module scaled size
-    // at gap=scale/2 squares disappear
-    const gap = Math.min(Number(options.gap.value), intDiv(scale, 2) - 1)
 
     const wh = scale - gap * 2 // width&height for 1 module with grid gap
 
@@ -124,48 +122,14 @@ addEventListener('DOMContentLoaded', () => {
     }
 
     { // format info
-      // ctx.fillStyle = "rgba(63, 149, 224, 0.5)"
+      // TODO
-      ctx.fillStyle = "rgba(63, 203, 224, 0.5)"
-
-      ctx.fillRect(0, idSize, idSize, scale)
-      ctx.fillRect(idSize, 0, scale, idSize + scale)
-      ctx.fillRect(idSize, canvas.height - idSize, scale, idSize)
-      ctx.fillRect(canvas.width - idSize, idSize, idSize, scale)
-    }
-
-    if (ver >= 7) { // version info
-      ctx.fillStyle = "rgba(63, 224, 171, 0.5)"
-
-      const verWidth = 3 * scale
-      const verHeight = 6 * scale
-      const verBeginPos = canvas.width - idSize - verWidth
-      ctx.fillRect(verBeginPos, 0, verWidth, verHeight)
-      ctx.fillRect(0, verBeginPos, verHeight, verWidth)
     }
   })
 
   { // Choose best scale for screen height
-    let padding = getComputedStyle(document.body).paddingBottom
+    const height = document.documentElement.clientHeight;
-    // remove `px` at the end and convert to number
+    const padding = getComputedStyle(document.body).paddingTop;
-    padding = Number(padding.slice(0, padding.length - 2))
+    // TODO
-
-    // compute available height
-    const height = 
-      document.documentElement.clientHeight
-        - canvas.offsetTop // substract height of everything above canvas
-        - padding // substract body padding
-
-    const width =
-      document.documentElement.clientWidth
-        - padding * 2
-
-    options.scale.value = Math.max(
-      intDiv(
-        width < height ? width : height,
-        25, // divide least dimension by QR version 2 size
-      ),
-      10, // minimum scale for this auto-detect algorithm
-    )
   }
 
   { // QR version related stuff

style.css

@@ -6,13 +6,14 @@ body {
 body > div {
   width: fit-content;
   margin: auto;
-  max-width: calc(100vw - 0.5rem * 2);
 }
 
-#options {
+body > div#options {
   display: flex;
   flex-direction: column;
   row-gap: 0.25rem;
+
+  max-width: calc(100vw - 0.5rem * 2);
 }
 
 select, input, button {