Add functionality to modify white border length

index.html

@@ -81,6 +81,31 @@
 
 			<br />
 
+			<div class="tooltip">
+				Border Size:
+				<span class="tooltiptext"
+					>Size of white border around QR code. Typically need some
+					border around the code, but depending on your use case you
+					can get rid of it.</span
+				>
+				<span id="printBorderSize"></span>
+			</div>
+
+			<br /><br />
+
+			<div class="slidecontainer">
+				<input
+					type="range"
+					min="0"
+					max="5"
+					value="0"
+					class="slider"
+					id="borderSize"
+				/>
+			</div>
+
+			<br />
+
 			<button
 				class="w3-button w3-white w3-border w3-border-blue"
 				style="margin: 0 auto"

index.js

@@ -65,6 +65,17 @@ correctionSlider.oninput = function () {
   }
 };
 
+var borderSlider = document.getElementById("borderSize");
+var borderOutput = document.getElementById("printBorderSize");
+borderOutput.innerHTML = borderSlider.value; // Display the default slider value
+var borderSize = Number(borderSlider.value);
+
+// Update the current slider value (each time you drag the slider handle)
+borderSlider.oninput = function () {
+  borderOutput.innerHTML = this.value;
+  borderSize = Number(this.value);
+};
+
 /**
  * Check whether bit at current position should be full sized.
  *
@@ -75,11 +86,13 @@ correctionSlider.oninput = function () {
  */
 function isSafeBit(i, j, QRLength) {
   // Currently hard coding position bits
-  if (i < 8 && j < 8) {
+  lowerLimit = (8 + borderSize)
+  upperLimit = (QRLength - 8 + borderSize)
+  if (i < lowerLimit && j < lowerLimit) {
     return false;
-  } else if (i > QRLength - 8 && j < 8) {
+  } else if (i > upperLimit && j < lowerLimit) {
     return false;
-  } else if (i < 8 && j > QRLength - 8) {
+  } else if (i < lowerLimit && j > upperLimit) {
     return false;
   }
 
@@ -156,7 +169,7 @@ function makeCode() {
 
   // QR code sizing
   bitLength = 10;
-  canvasLength = bitLength * (QRLength + 2);
+  canvasLength = bitLength * (QRLength + borderSize * 2);
   canvas.width = canvasLength;
   canvas.height = canvasLength;
 
@@ -185,7 +198,14 @@ function makeCode() {
       } else {
         ctx.fillStyle = white;
       }
-      drawShape(ctx, i + 1, j + 1, bitLength, radiusRatio, QRLength);
+      drawShape(
+        ctx,
+        i + borderSize,
+        j + borderSize,
+        bitLength,
+        radiusRatio,
+        QRLength
+      );
     }
   }
 }