From ab58456a4a8174f2e7dbe96b4898ff53699938a5 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Sun, 4 Nov 2018 11:37:33 -0800
Subject: [PATCH] fixed transparency

---
 index.html | 187 +++++++++++++++++++++++++++--------------------------
 1 file changed, 94 insertions(+), 93 deletions(-)

diff --git a/index.html b/index.html
index 2b121df8..24562570 100644
--- a/index.html
+++ b/index.html
@@ -37,8 +37,8 @@
 					<br/>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
-      					<label for="checkboxSecondColor" />
-      					<div>Second Color</div>
+						<label for="checkboxSecondColor" />
+						<div>Second Color</div>
 					</div>
 					<span class="dropdown">
 						<select id="secondColorSelection" onchange="updateBorder()"></select>
@@ -46,8 +46,8 @@
 					<br/>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
-      					<label for="checkboxThirdColor" />
-      					<div>Third Color</div>
+						<label for="checkboxThirdColor" />
+						<div>Third Color</div>
 					</div>
 					<span class="dropdown">
 						<select id="thirdColorSelection" onchange="updateBorder()"></select>
@@ -55,8 +55,8 @@
 					<br/>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxCreature" />
-      					<label for="checkboxCreature" />
-      					<div>Power/Toughness</div>
+						<label for="checkboxCreature" />
+						<div>Power/Toughness</div>
 					</div>
 					<input id="inputPowerToughness" class="input" value="" type="text"></input>
 				</div>
@@ -66,28 +66,28 @@
 				<div class="togglee">
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" />
-      					<label for="checkboxLegendary" />
-      					<div>Legendary</div>
+						<label for="checkboxLegendary" />
+						<div>Legendary</div>
 					</div>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxNyx" onchange="updateBorder()" />
-      					<label for="checkboxNyx" />
-      					<div>Nyx</div>
+						<label for="checkboxNyx" />
+						<div>Nyx</div>
 					</div>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxMiracle" onchange="updateBorder()" />
-      					<label for="checkboxMiracle" />
-      					<div>Miracle</div>
+						<label for="checkboxMiracle" />
+						<div>Miracle</div>
 					</div>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()" />
-      					<label for="checkboxRareStamp" />
-      					<div>Rare Stamp</div>
+						<label for="checkboxRareStamp" />
+						<div>Rare Stamp</div>
 					</div>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()" />
-      					<label for="checkboxFlipIcon" />
-      					<div>Flip Icon</div>
+						<label for="checkboxFlipIcon" />
+						<div>Flip Icon</div>
 					</div>
 					<span class="dropdown">
 						<select id="inputFlipIcon" onchange="updateBorder()">
@@ -102,30 +102,30 @@
 					</span>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" />
-      					<label for="checkboxFlipTip" />
-      					<div>Flip Tip</div>
+						<label for="checkboxFlipTip" />
+						<div>Flip Tip</div>
 					</div>
 					<input id="inputFlipTip" value="" type="text" class="input"></input>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" />
-      					<label for="checkboxFlippedDark" />
-      					<div>Flipped (Darker)</div>
+						<label for="checkboxFlippedDark" />
+						<div>Flipped (Darker)</div>
 					</div>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxSilverBorder" onchange="updateBorder()" />
-      					<label for="checkboxSilverBorder" />
-      					<div>Silver Border</div>
+						<label for="checkboxSilverBorder" />
+						<div>Silver Border</div>
 					</div>
 					<input type="color" id="inputColor" onchange="updateBorder()"> Border Color</input>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxFoil" />
-      					<label for="checkboxFoil" />
-      					<div>Foil</div>
+						<label for="checkboxFoil" />
+						<div>Foil</div>
 					</div>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxIdentity" onchange="updateBorder()" />
-      					<label for="checkboxIdentity" />
-      					<div>Color Identity</div>
+						<label for="checkboxIdentity" />
+						<div>Color Identity</div>
 					</div>
 					<input id="inputIdentity" type="text" class="input" onchange="updateBorder()"></input>
 				</div>
@@ -201,8 +201,8 @@
 					<br/>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxArtistColor" />
-      					<label for="checkboxArtistColor" />
-      					<div>Make Artist Credit font black</div>
+						<label for="checkboxArtistColor" />
+						<div>Make Artist Credit font black</div>
 					</div>
 				</div>
 			</div>
@@ -211,8 +211,8 @@
 				<div class="togglee">
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxSetSymbol" checked="true" />
-      					<label for="checkboxSetSymbol" />
-      					<div>Set Symbol</div>
+						<label for="checkboxSetSymbol" />
+						<div>Set Symbol</div>
 					</div>
 					Set Code
 					<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input"></input>
@@ -230,8 +230,8 @@
 					<br/><br/>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxWatermark" checked="true" />
-      					<label for="checkboxWatermark" />
-      					<div>Watermark</div>
+						<label for="checkboxWatermark" />
+						<div>Watermark</div>
 					</div>
 					<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark"></input>
 					<br/>
@@ -255,8 +255,8 @@
 					<br/>
 					<div class="checkbox">
 						<input type="checkbox" id="checkboxSecondWatermarkColor" />
-      					<label for="checkboxSecondWatermarkColor" />
-      					<div>Second Watermark Color</div>
+						<label for="checkboxSecondWatermarkColor" />
+						<div>Second Watermark Color</div>
 					</div>
 					<span class="dropdown">
 						<select id="secondWatermarkColorSelection"></select></input>
@@ -401,21 +401,21 @@ input[type="color"] {
 /*Custom checkboxes!*/
 .checkbox {
 	top: 4px;
-    position: relative;
+	position: relative;
 }
 .checkbox label {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border-radius: 100%;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    z-index: 1;
-    background: var(--section-border-color);
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	border-radius: 100%;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	z-index: 1;
+	background: var(--section-border-color);
 }
 .checkbox input[type=checkbox]:checked + label {
-    background: var(--title-text-color);
+	background: var(--title-text-color);
 }
 .checkbox input {
 	opacity: 0;
@@ -428,10 +428,10 @@ input[type="color"] {
 }
 /*Custom select box (dropdown)*/
 .dropdown {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  padding: 0px;
+	position: relative;
+	display: inline-block;
+	width: 100%;
+	padding: 0px;
 }
 .dropdown select {
 	width: inherit;
@@ -452,8 +452,8 @@ input[type="color"] {
 	position: absolute;
 	pointer-events: none;
 	color: var(--title-text-color);
- 	right: 10px;
- 	top: 38%;
+	right: 10px;
+	top: 38%;
 }
 /*List of all mana symbols and their associated codes*/
 #symbolList img {
@@ -576,48 +576,50 @@ document.getElementById("secondWatermarkColorSelection").innerHTML = document.ge
 
 //Runs ten times every second (main loop)
 function cardClock() {
-		//Insures that the corners of the final image are transparent
-		card.globalCompositeOperation = "source-over"
-		drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, card, imgCardMask, false, false)
-		card.globalCompositeOperation = "source-atop"
-		//Draws the card image, then...
-		drawPicture()
-		//draws the card frame on top
-		if (transparentBorder == false) {
-			drawMask(imgBorder, 0, 0, cardWidth, cardHeight, card, imgArtMask, false, false)
-		} else {
-			card.drawImage(imgBorder, 0, 0, cardWidth, cardHeight)
-		}
-		//draws the set symbol, mana cost, and watermark
-		drawSetSymbol()
-		drawManaCost()
-		drawWatermark()
-		//writes all the text: name, type, rules...
-		writeText()
-		//m15 and 8th edition have different info at the bottom of the cards and require completely different functions
-		if (m15Info == true) {
-			bottomInfoM15()
-		} else if (eighthInfo == true) {
-			bottomInfo8th()
-		}else if (planechaseInfo == true) {
-			bottomInfoPlanechase()
-		}
-		//A shiny foil overlay!
-		if(document.getElementById("checkboxFoil").checked == true) {
-			card.drawImage(imgFoil, 0, 0, cardWidth, cardHeight)
-		}
-		//These are for pinpointing coordinates while adjusting values for new border types
-		//Vertical Line
-		// card.beginPath()
-		// card.moveTo(688, 0)
-		// card.lineTo(688, 1044)
-		// card.stroke()
-		//Horizontal Line
-		// card.beginPath()
-		// card.moveTo(0, setSymbolY)
-		// card.lineTo(749, setSymbolY)
-		// card.stroke()
+	//fixes the global alpha just incase...
+	card.globalAlpha = 1
+	//Insures that the corners of the final image are transparent
+	card.globalCompositeOperation = "source-over"
+	drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, card, imgCardMask, false, false)
+	card.globalCompositeOperation = "source-atop"
+	//Draws the card image, then...
+	drawPicture()
+	//draws the card frame on top
+	if (transparentBorder == false) {
+		drawMask(imgBorder, 0, 0, cardWidth, cardHeight, card, imgArtMask, false, false)
+	} else {
+		card.drawImage(imgBorder, 0, 0, cardWidth, cardHeight)
 	}
+	//draws the set symbol, mana cost, and watermark
+	drawSetSymbol()
+	drawManaCost()
+	drawWatermark()
+	//writes all the text: name, type, rules...
+	writeText()
+	//m15 and 8th edition have different info at the bottom of the cards and require completely different functions
+	if (m15Info == true) {
+		bottomInfoM15()
+	} else if (eighthInfo == true) {
+		bottomInfo8th()
+	}else if (planechaseInfo == true) {
+		bottomInfoPlanechase()
+	}
+	//A shiny foil overlay!
+	if(document.getElementById("checkboxFoil").checked == true) {
+		card.drawImage(imgFoil, 0, 0, cardWidth, cardHeight)
+	}
+	//These are for pinpointing coordinates while adjusting values for new border types
+	//Vertical Line
+	// card.beginPath()
+	// card.moveTo(688, 0)
+	// card.lineTo(688, 1044)
+	// card.stroke()
+	//Horizontal Line
+	// card.beginPath()
+	// card.moveTo(0, setSymbolY)
+	// card.lineTo(749, setSymbolY)
+	// card.stroke()
+}
 //Sets up the initial clock
 var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("inputFPS").value)
 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
@@ -934,7 +936,6 @@ function drawWatermark() {
 	    	drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, card, imgWatermark, false, false)
 	    }
 	}
-	card.globalAlpha = 1
 }
 //Mana cost
 function drawManaCost() {