deco tiles

tools/textGenerator/textGenerator.html

@@ -41,6 +41,7 @@
 		function drawText () {
 			var fontName = document.getElementById("fontName").value;
 			var fontColors = document.getElementById("fontColor").value.split(',');
+			var outlineColors = document.getElementById("outlineColor").value.split(',');
 			var marginTop = Number(document.getElementById("marginTop").value);
 			var marginLeft = Number(document.getElementById("marginLeft").value);
 			var fontSize = document.getElementById("fontSize").value;
@@ -55,26 +56,44 @@
 			var row = 0;
 			var column = 0;
             var colorIndex = 0;
+            var outlineColorIndex = 0;
 			
+			canvasContext.imageSmoothingEnabled = false //Antialiasing aus
 			canvasContext.font = fontInfo;
 			canvasContext.fillStyle = fontColors[colorIndex];
-			canvasContext.textAlign = "left";
-			canvasContext.textBaseline = "hanging";
+			canvasContext.textAlign = "center";
+			//canvasContext.textBaseline = "hanging";  //Antialiasing-Killer
 			canvasContext.clearRect(0, 0, canvas.width, canvas.height);
+			
 
 			for(var n=0; n<lines.length; n++) {
 			
 				var x = (column * 128) + marginLeft;
 				var y = (row * tileHeight) + marginTop;
-                
+
                 colorIndex++;
                 if(colorIndex == fontColors.length){
                     colorIndex = 0;
                 }
 
-                canvasContext.fillStyle = fontColors[colorIndex];
+                outlineColorIndex++;
+                if(outlineColorIndex == outlineColors.length){
+                    outlineColorIndex = 0;
+                }
 
-				canvasContext.fillText(lines[n], x, y, 128-marginLeft);
+                // Draw an outline, if the outline field has any entries.
+                if (outlineColors[0].length > 0) {
+                    canvasContext.fillStyle = outlineColors[outlineColorIndex];
+                    for (let dx=-1; dx<=1; dx++) {
+                        for (let dy=-1; dy<=1; dy++) {
+                            canvasContext.fillText(lines[n], x+dx+64, y+dy, 128-marginLeft);
+                        }
+                    }
+                }
+
+                canvasContext.fillStyle = fontColors[colorIndex];
+				canvasContext.fillText(lines[n], x+64, y, 128-marginLeft);
+				canvasContext.fillText(lines[n], x+64, y, 128-marginLeft);
 				row++;
 				
 				if(row > maxRows)
@@ -103,13 +122,16 @@
 			<label>Size</label> <input id="fontSize" value="8"  style="width:3em"; /> px	
 		</div>
 		<div class="setting">
-			<label>Margin top</label> <input id="marginTop" value="17"  style="width:3em"; /> px	
+			<label>Margin top</label> <input id="marginTop" value="25"  style="width:3em"; /> px	
+		</div>
+		<div class="setting">
+			<label>Margin left</label> <input id="marginLeft" value="17"  style="width:3em"; /> px	
 		</div>
 		<div class="setting">
-			<label>Margin left</label> <input id="marginLeft" value="20"  style="width:3em"; /> px	
+			<label>Color</label> <input id="fontColor" value="#A7F8FF"  style="width:28em"; />
 		</div>
 		<div class="setting">
-			<label>Color</label> <input id="fontColor" value="#ff1e88,#ee3aff,#79ffe4,#5cff78,#ffe378"  style="width:28em"; />
+			<label>Outline</label> <input id="outlineColor" value="#132FFF"  style="width:28em"; />
 		</div>
 	</form>