Merge pull request #24 from Kalekki/checkerboard

Checkerboard background to signal transparency

css/index.css

@@ -2,6 +2,9 @@
 	font-size: 100%;
 	font-family: Arial, Helvetica, sans-serif;
 }
+body{
+    margin:0px;
+}
 
 .container {
 	position: relative;
@@ -11,24 +14,8 @@
 	background-color: #ccc;
 }
 
-.maskPaintCanvas {
-	border: 3px dotted #993355c0;
-}
-
-.overlayCanvas {
-	border: 1px solid #f00;
-}
-
-.tempCanvas {
-	border: 3px dotted #007affc0;
-}
-
-.targetCanvas {
-	border: 2px dashed #0f0;
-}
-
 .canvas {
-	border: 2px dotted #00f;
+    border: 1px black solid;
 }
 
 .mainHSplit {
@@ -58,6 +45,12 @@
 	z-index: 999;
 	cursor: move;
 	background-color: rgba(104, 104, 104, 0.75);
+    position: absolute;
+    top: 68px;
+    left: 68px;
+    width: 250px;
+    height: auto;
+    z-index: 999;
 
 	user-select: none;
 

index.html

@@ -27,6 +27,7 @@
                     id="negPrompt">people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry</textarea><br />
                 <hr>
             </div>
+            <!-- SD section -->
             <button type="button" class="collapsible">Stable Diffusion settings</button>
             <div class="content">
                 <label for="seed">Seed (-1 for random):</label> <br>
@@ -62,6 +63,7 @@
                 <input type="range" id="batchCount" name="batchCount" min="1" max="8" step="1" /><br />
                 <hr>
             </div>
+            <!-- Unsectioned -->
             <label for="scaleFactor">Scale factor: <input type="number" id="scaleFactorTxt"></label><br />
             <input type="range" id="scaleFactor" name="scaleFactor" min="1" max="16" /><br />
             <label for="cbxSnap">Snap to grid?</label>
@@ -80,6 +82,7 @@
             <span id="maskBlurText"></span><br />
             <input type="number" id="maskBlur" name="maskBlur" min="0" max="256" value="0" step="1"
                 onchange="changeMaskBlur()" /><br />
+            <!-- Save/load image section -->
             <button type="button" class="collapsible">Save/Load/New image</button>
             <div class="content">
                 <label for="preloadImage">Load image:</label>

js/index.js

@@ -429,7 +429,7 @@ function mouseMove(evt) {
 		ovCtx.drawImage(arbitraryImage, finalX, finalY);
 	} else if (!paintMode) {
 		// draw targeting square reticle thingy cursor
-		ovCtx.strokeStyle = "#00000077";
+		ovCtx.strokeStyle = "#FFFFFF";
 		snapOffsetX = 0;
 		snapOffsetY = 0;
 		if (snapToGrid) {
@@ -817,18 +817,14 @@ function isCanvasBlank(x, y, w, h, specifiedCanvas) {
 }
 
 function drawBackground() {
-	bgCtx.lineWidth = 1;
-	bgCtx.strokeStyle = "#999";
-	var gridbox = bgCanvas.getBoundingClientRect();
-	for (var i = 0; i < gridbox.width; i += 64) {
-		bgCtx.moveTo(i, 0);
-		bgCtx.lineTo(i, bgCanvas.height);
-		bgCtx.stroke();
-	}
-	for (var i = 0; i < gridbox.height; i += 64) {
-		bgCtx.moveTo(0, i);
-		bgCtx.lineTo(gridbox.width, i);
-		bgCtx.stroke();
+	// Checkerboard
+	let darkTileColor = "#333";
+	let lightTileColor = "#555";
+	for (var x = 0; x < bgCanvas.width; x += 64) {
+		for (var y = 0; y < bgCanvas.height; y += 64) {
+			bgCtx.fillStyle = (x + y) % 128 === 0 ? lightTileColor : darkTileColor;
+			bgCtx.fillRect(x, y, 64, 64);
+		}
 	}
 }