diff --git a/data/borders/8th/border.js b/data/borders/8th/border.js
index 8942b448..4ecaa02e 100644
--- a/data/borders/8th/border.js
+++ b/data/borders/8th/border.js
@@ -47,4 +47,4 @@ loadColors("white-White,whiteLand-White Land,blue-Blue,blueLand-Blue Land,black-
 document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
 document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
 
-updateBorder()
\ No newline at end of file
+finishTemplate()
\ No newline at end of file
diff --git a/data/borders/defaultBorder.js b/data/borders/defaultBorder.js
index f770172d..1e59cc71 100644
--- a/data/borders/defaultBorder.js
+++ b/data/borders/defaultBorder.js
@@ -7,8 +7,19 @@ var nyxBorder = false
 var miracleBorder = false
 var stampBorder = false
 var flipBorder = false
+var creatureBorder = true
+var thirdBorder = true
+var secondBorder = true
+//Shifted text
 titleRightShift = 0
 typeRightShift = 0
+//Aligned text
+var titleAlign = "left"
+var typeAlign = "left"
+//Image alignment
+var centerSetSymbol = 1 //1=not centered, 2=centered
+var artX = 58
+var artY = 118
 //Loads the correct border data
 borderPath = "data/borders/" + document.getElementById("borderSelection").value
 loadScript(borderPath + "border.js")
\ No newline at end of file
diff --git a/data/borders/artMask.png b/data/borders/m15/artMask.png
similarity index 100%
rename from data/borders/artMask.png
rename to data/borders/m15/artMask.png
diff --git a/data/borders/m15/artifact/front.png b/data/borders/m15/artifact/front.png
deleted file mode 100644
index 78edd1cc..00000000
Binary files a/data/borders/m15/artifact/front.png and /dev/null differ
diff --git a/data/borders/m15/border.js b/data/borders/m15/border.js
index 7ab61a50..bb26478a 100644
--- a/data/borders/m15/border.js
+++ b/data/borders/m15/border.js
@@ -56,5 +56,5 @@ nyxBorder = true
 miracleBorder = true
 flipBorder = true
 //With all the new values in place, the program will update it's border images
-updateBorder()
+finishTemplate()
 //Any special functions go at the bottom
\ No newline at end of file
diff --git a/data/borders/map/artMask.png b/data/borders/map/artMask.png
new file mode 100644
index 00000000..b90810f4
Binary files /dev/null and b/data/borders/map/artMask.png differ
diff --git a/data/borders/map/artifact/frame.png b/data/borders/map/artifact/frame.png
new file mode 100644
index 00000000..8d19601f
Binary files /dev/null and b/data/borders/map/artifact/frame.png differ
diff --git a/data/borders/map/artifact/pt.png b/data/borders/map/artifact/pt.png
new file mode 100644
index 00000000..f19c2bb7
Binary files /dev/null and b/data/borders/map/artifact/pt.png differ
diff --git a/data/borders/map/artifactLand/frame.png b/data/borders/map/artifactLand/frame.png
new file mode 100644
index 00000000..2cd1db8c
Binary files /dev/null and b/data/borders/map/artifactLand/frame.png differ
diff --git a/data/borders/map/artifactLand/pt.png b/data/borders/map/artifactLand/pt.png
new file mode 100644
index 00000000..95380b7c
Binary files /dev/null and b/data/borders/map/artifactLand/pt.png differ
diff --git a/data/borders/map/black/frame.png b/data/borders/map/black/frame.png
new file mode 100644
index 00000000..017e8adc
Binary files /dev/null and b/data/borders/map/black/frame.png differ
diff --git a/data/borders/map/black/pt.png b/data/borders/map/black/pt.png
new file mode 100644
index 00000000..ccabcae3
Binary files /dev/null and b/data/borders/map/black/pt.png differ
diff --git a/data/borders/map/blackLand/frame.png b/data/borders/map/blackLand/frame.png
new file mode 100644
index 00000000..362c4e47
Binary files /dev/null and b/data/borders/map/blackLand/frame.png differ
diff --git a/data/borders/map/blackLand/pt.png b/data/borders/map/blackLand/pt.png
new file mode 100644
index 00000000..ccabcae3
Binary files /dev/null and b/data/borders/map/blackLand/pt.png differ
diff --git a/data/borders/map/blue/frame.png b/data/borders/map/blue/frame.png
new file mode 100644
index 00000000..e20f3348
Binary files /dev/null and b/data/borders/map/blue/frame.png differ
diff --git a/data/borders/map/blue/pt.png b/data/borders/map/blue/pt.png
new file mode 100644
index 00000000..ae171eb1
Binary files /dev/null and b/data/borders/map/blue/pt.png differ
diff --git a/data/borders/map/blueLand/frame.png b/data/borders/map/blueLand/frame.png
new file mode 100644
index 00000000..f8e3b198
Binary files /dev/null and b/data/borders/map/blueLand/frame.png differ
diff --git a/data/borders/map/blueLand/pt.png b/data/borders/map/blueLand/pt.png
new file mode 100644
index 00000000..ae171eb1
Binary files /dev/null and b/data/borders/map/blueLand/pt.png differ
diff --git a/data/borders/map/border.js b/data/borders/map/border.js
new file mode 100644
index 00000000..7e8bd3b9
--- /dev/null
+++ b/data/borders/map/border.js
@@ -0,0 +1,59 @@
+//Map Border
+//Anything to do with...
+//Card Title
+var titleFont = "40px belerenbsc"
+var titleFontSpacing = "0.1px"
+var titleX = 374.5
+var titleY = 52
+var titleAlign = "center"
+//Mana Cost
+var manaCostRadius = 17.5
+var manaCostX = 657
+var manaCostY = 59
+//Card Type
+var typeFont = "33.5px belerenb"
+var typeFontSpacing = "0.05px"
+var typeX = 374.5
+var typeY = 598
+var typeAlign = "center"
+//Rules/Flavor Text
+var textFont = "px mplantin"
+var textFontSpacing = 1.1
+var textX = 89
+var textY = 662
+var textWidth = 660
+//Power Toughness
+var ptFont = "39px belerenb"
+var ptFontSpacing = "0.3px"
+var ptTextX = 645
+var ptTextY = 936
+var ptX = 571
+var ptY = 929
+var ptWidth = 137
+var ptHeight = 75
+//Bottom Info
+var eighthInfo = false
+var eighthInfoY = 992
+var m15Info = true
+var m15InfoY = 993
+//Set Symbol
+var setSymbolY = 123
+var setSymbolRight = 374.5
+var setSymbolWidth = 66
+var setSymbolHeight = 44
+var centerSetSymbol = 2
+//Watermark
+var watermarkWidth = 520
+var watermarkHeight = 250
+var watermarkY = 805
+//Color Options
+loadColors("white-White,whiteLand-White Land,blue-Blue,blueLand-Blue Land,black-Black,blackLand-Black Land,red-Red,redLand-Red Land,green-Green,greenLand-Green Land,gold-Gold,goldLand-Gold Land,colorless-Colorless,colorlessLand-Colorless Land,artifact-Artifact")
+document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
+document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
+//Other
+var thirdBorder = false
+var artX = 30
+var artY = 116
+//With all the new values in place, the program will update it's border images
+finishTemplate()
+//Any special functions go at the bottom
\ No newline at end of file
diff --git a/data/borders/map/borderMask.png b/data/borders/map/borderMask.png
new file mode 100644
index 00000000..710d200e
Binary files /dev/null and b/data/borders/map/borderMask.png differ
diff --git a/data/borders/map/colorless/frame.png b/data/borders/map/colorless/frame.png
new file mode 100644
index 00000000..4d9cccf0
Binary files /dev/null and b/data/borders/map/colorless/frame.png differ
diff --git a/data/borders/map/colorless/pt.png b/data/borders/map/colorless/pt.png
new file mode 100644
index 00000000..3a5ec3a5
Binary files /dev/null and b/data/borders/map/colorless/pt.png differ
diff --git a/data/borders/map/colorlessLand/frame.png b/data/borders/map/colorlessLand/frame.png
new file mode 100644
index 00000000..476cef98
Binary files /dev/null and b/data/borders/map/colorlessLand/frame.png differ
diff --git a/data/borders/map/colorlessLand/pt.png b/data/borders/map/colorlessLand/pt.png
new file mode 100644
index 00000000..3a5ec3a5
Binary files /dev/null and b/data/borders/map/colorlessLand/pt.png differ
diff --git a/data/borders/map/frameMask.png b/data/borders/map/frameMask.png
new file mode 100644
index 00000000..f48e102b
Binary files /dev/null and b/data/borders/map/frameMask.png differ
diff --git a/data/borders/map/gold/frame.png b/data/borders/map/gold/frame.png
new file mode 100644
index 00000000..c9c052b6
Binary files /dev/null and b/data/borders/map/gold/frame.png differ
diff --git a/data/borders/map/gold/pt.png b/data/borders/map/gold/pt.png
new file mode 100644
index 00000000..6deafacc
Binary files /dev/null and b/data/borders/map/gold/pt.png differ
diff --git a/data/borders/map/goldLand/frame.png b/data/borders/map/goldLand/frame.png
new file mode 100644
index 00000000..3f67adaf
Binary files /dev/null and b/data/borders/map/goldLand/frame.png differ
diff --git a/data/borders/map/goldLand/pt.png b/data/borders/map/goldLand/pt.png
new file mode 100644
index 00000000..6deafacc
Binary files /dev/null and b/data/borders/map/goldLand/pt.png differ
diff --git a/data/borders/map/green/frame.png b/data/borders/map/green/frame.png
new file mode 100644
index 00000000..51dc2bc6
Binary files /dev/null and b/data/borders/map/green/frame.png differ
diff --git a/data/borders/map/green/pt.png b/data/borders/map/green/pt.png
new file mode 100644
index 00000000..75aef3c1
Binary files /dev/null and b/data/borders/map/green/pt.png differ
diff --git a/data/borders/map/greenLand/frame.png b/data/borders/map/greenLand/frame.png
new file mode 100644
index 00000000..509e5798
Binary files /dev/null and b/data/borders/map/greenLand/frame.png differ
diff --git a/data/borders/map/greenLand/pt.png b/data/borders/map/greenLand/pt.png
new file mode 100644
index 00000000..75aef3c1
Binary files /dev/null and b/data/borders/map/greenLand/pt.png differ
diff --git a/data/borders/map/red/frame.png b/data/borders/map/red/frame.png
new file mode 100644
index 00000000..74b1d48f
Binary files /dev/null and b/data/borders/map/red/frame.png differ
diff --git a/data/borders/map/red/pt.png b/data/borders/map/red/pt.png
new file mode 100644
index 00000000..03ae8bfb
Binary files /dev/null and b/data/borders/map/red/pt.png differ
diff --git a/data/borders/map/redLand/frame.png b/data/borders/map/redLand/frame.png
new file mode 100644
index 00000000..6bf19a7b
Binary files /dev/null and b/data/borders/map/redLand/frame.png differ
diff --git a/data/borders/map/redLand/pt.png b/data/borders/map/redLand/pt.png
new file mode 100644
index 00000000..03ae8bfb
Binary files /dev/null and b/data/borders/map/redLand/pt.png differ
diff --git a/data/borders/map/white/frame.png b/data/borders/map/white/frame.png
new file mode 100644
index 00000000..0fd7b501
Binary files /dev/null and b/data/borders/map/white/frame.png differ
diff --git a/data/borders/map/white/pt.png b/data/borders/map/white/pt.png
new file mode 100644
index 00000000..eef49e9a
Binary files /dev/null and b/data/borders/map/white/pt.png differ
diff --git a/data/borders/map/whiteLand/frame.png b/data/borders/map/whiteLand/frame.png
new file mode 100644
index 00000000..59e2cac1
Binary files /dev/null and b/data/borders/map/whiteLand/frame.png differ
diff --git a/data/borders/map/whiteLand/pt.png b/data/borders/map/whiteLand/pt.png
new file mode 100644
index 00000000..eef49e9a
Binary files /dev/null and b/data/borders/map/whiteLand/pt.png differ
diff --git a/data/borders/old/borderColorMask.png b/data/borders/old/borderColorMask.png
deleted file mode 100644
index 166d0686..00000000
Binary files a/data/borders/old/borderColorMask.png and /dev/null differ
diff --git a/data/borders/old/borderEdge.png b/data/borders/old/borderEdge.png
deleted file mode 100644
index 84adf68a..00000000
Binary files a/data/borders/old/borderEdge.png and /dev/null differ
diff --git a/data/borders/old/borderMask.png b/data/borders/old/borderMask.png
deleted file mode 100644
index b9581508..00000000
Binary files a/data/borders/old/borderMask.png and /dev/null differ
diff --git a/data/borders/old/legendSilver.png b/data/borders/old/legendSilver.png
deleted file mode 100644
index e692cac7..00000000
Binary files a/data/borders/old/legendSilver.png and /dev/null differ
diff --git a/data/borders/old/silverBorder.png b/data/borders/old/silverBorder.png
deleted file mode 100644
index 2f89c373..00000000
Binary files a/data/borders/old/silverBorder.png and /dev/null differ
diff --git a/data/scripts/mask.js b/data/scripts/mask.js
index 85c086ce..67ecb748 100644
--- a/data/scripts/mask.js
+++ b/data/scripts/mask.js
@@ -1,7 +1,8 @@
 var mask = document.createElement("canvas")
 var maskContext = mask.getContext("2d")
 
-function drawMask(img, x, y, width, height, imgMask, secondMask, arg) {
+function drawMask(img, x, y, width, height, targetContext, imgMask, secondMask, arg) {
+	var context = targetContext
 	mask.width = width
 	mask.height = height
 	maskContext.clearRect(0, 0, width, height)
@@ -22,5 +23,5 @@ function drawMask(img, x, y, width, height, imgMask, secondMask, arg) {
 	} else {
 		maskContext.drawImage(img, 0, 0, width, height)
 	}
-	card.drawImage(mask, x, y, width, height)
+	targetContext.drawImage(mask, x, y, width, height)
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index ed7e1ae7..8d3416e9 100644
--- a/index.html
+++ b/index.html
@@ -19,36 +19,38 @@
 				<div class="toggler" onclick="toggleSection(this)">Card Border</div>
 				<div class="togglee shown">
 					Border
-					<select id="borderSelection" onchange="changeBorder()">
+					<select id="borderSelection" onchange="changeTemplate()">
+						<option value="map/">Map (Ixalan)</option>
 						<option value="m15/">M15</option>
+						
 						<option value="8th/">8th</option>
 					</select>
 					<br/>
 					Color
-					<select id="colorSelection" onchange="updateColor()">
+					<select id="colorSelection" onchange="updateBorder()">
 						<option value="white">White</option>
 					</select>
 					<br/>
-					<input type="checkbox" id="checkboxSecondColor" onchange="updateColor()">Second Color <select id="secondColorSelection" onchange="updateColor()"></select></input>
+					<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()">Second Color <select id="secondColorSelection" onchange="updateBorder()"></select></input>
 					<br/>
-					<input type="checkbox" id="checkboxThirdColor" onchange="updateColor()">Third Color <select id="thirdColorSelection" onchange="updateColor()"></select></input>
+					<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()">Third Color <select id="thirdColorSelection" onchange="updateBorder()"></select></input>
 					<br/>
-					<input type="checkbox" id="checkboxCreature" onchange="updateColor()">Power/Toughness
+					<input type="checkbox" id="checkboxCreature" onchange="updateBorder()">Power/Toughness
 					<input id="inputPowerToughness" value="" type="text"></input>
 				</div>
 			</div>
 			<div class="section">
 				<div class="toggler" onclick="toggleSection(this)">Border (Advanced)</div>
 				<div class="togglee">
-					<input type="checkbox" id="checkboxLegendary" onchange="updateColor()">Legendary</input>
+					<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()">Legendary</input>
 					<br/>
-					<input type="checkbox" id="checkboxNyx" onchange="updateColor()">Nyx</input>
+					<input type="checkbox" id="checkboxNyx" onchange="updateBorder()">Nyx</input>
 					<br/>
-					<input type="checkbox" id="checkboxMiracle" onchange="updateColor()">Miracle</input>
+					<input type="checkbox" id="checkboxMiracle" onchange="updateBorder()">Miracle</input>
 					<br/>
-					<input type="checkbox" id="checkboxRareStamp" onchange="updateColor()">Rare Stamp</input>
+					<input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()">Rare Stamp</input>
 					<br/>
-					<input type="checkbox" id="checkboxFlipIcon" onchange="updateColor()">Flip Icon <select id="inputFlipIcon" onchange="updateColor()">
+					<input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()">Flip Icon <select id="inputFlipIcon" onchange="updateBorder()">
 						<option value="blank.png">Blank</option>
 						<option value="day.png">Day</option>
 						<option value="night.png">Night</option>
@@ -58,19 +60,19 @@
 						<option value="planeswalker.png">Planeswalker</option>
 					</select></input>
 					<br/>
-					<input type="checkbox" id="checkboxFlipTip" onchange="updateColor()">Flip Tip
+					<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()">Flip Tip
 					<input id="inputFlipTip" value="" type="text"></input>
 					<br/>
-					<input type="checkbox" id="checkboxFlippedDark" onchange="updateColor()">Flipped (Darker)</input>
+					<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()">Flipped (Darker)</input>
 					<br/>
-					<input type="checkbox" id="checkboxSilverBorder">Silver Border</input>
+					<input type="checkbox" id="checkboxSilverBorder" onchange="updateBorder()">Silver Border</input>
 					<br/>
-					<input type="color" id="inputColor"> Border Color</input>
+					<input type="color" id="inputColor" onchange="updateBorder()"> Border Color</input>
 					<br/>
 					<input type="checkbox" id="checkboxFoil">Foil</input>
 					<br/>
-					<input type="checkbox" id="checkboxIdentity">Color Identity
-					<input id="inputIdentity"type="text"></input>
+					<input type="checkbox" id="checkboxIdentity" onchange="updateBorder()">Color Identity
+					<input id="inputIdentity" type="text" onchange="updateBorder()"></input>
 				</div>
 			</div>
 			<div class="section">
@@ -427,8 +429,12 @@ a:active {
 
 
 <script crossorigin="anonymous">
+//Create the canvas for creating the border image
+var borderCanvas = document.createElement("canvas")
+borderCanvas.width = 749; borderCanvas.height = 1044
+var border = borderCanvas.getContext("2d")
 //Load the initial border (m15)
-changeBorder()
+changeTemplate()
 //set up initial variables
 var borderPath
 var secondColor
@@ -439,13 +445,13 @@ var typeRightShift = 0
 var canvas = document.getElementById("canvas")
 var card = canvas.getContext("2d")
 //Load dynamic images
-var dynamicImageList = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "borderLegendary", "secondBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "art", "setSymbol", "watermark", "multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "borderNyx", "secondBorderNyx", "borderMiracle", "secondBorderMiracle", "borderFlipIcon", "borderFlipCircle", "borderFlipTip", "borderFlippedDark", "secondBorderFlippedDark"]
+var dynamicImageList = ["art", "setSymbol", "watermark", "multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "border", "borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "borderLegendary", "secondBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "borderNyx", "secondBorderNyx", "borderMiracle", "secondBorderMiracle", "borderFlipIcon", "borderFlipCircle", "borderFlipTip", "borderFlippedDark", "secondBorderFlippedDark", "artMask"]
 for (i = 0; i < dynamicImageList.length; i ++) {
 	var imgName = "img" + dynamicImageList[i].charAt(0).toUpperCase() + dynamicImageList[i].slice(1)
 	window[imgName] = new Image()
 }
 //Load static images
-var staticImageList = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "artMask", "bar", "identity"]
+var staticImageList = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
 for (i = 0; i < staticImageList.length; i ++) {
 	var imgName = "img" + staticImageList[i].charAt(0).toUpperCase() + staticImageList[i].slice(1)
 	window[imgName] = new Image()
@@ -470,19 +476,17 @@ document.getElementById("secondWatermarkColorSelection").innerHTML = document.ge
 function cardClock() {
 		//Insures that the corners of the final image are transparent
 		card.globalCompositeOperation = "source-over"
-		drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, imgCardMask, false, false)
+		drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, card, imgCardMask, false, false)
 		card.globalCompositeOperation = "source-atop"
 		//Draws the card image, then...
 		drawPicture()
-		//redraws the colored border in case the image is too big.
-		drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, imgCardMask, imgArtMask, false)
-		//draws the card frames
-		drawBorder()
+		//draws the card frame on top
+		drawMask(imgBorder, 0, 0, canvas.width, canvas.height, card, imgArtMask, false, false)
 		//draws the set symbol, mana cost, and watermark
 		drawSetSymbol()
 		drawManaCost()
 		drawWatermark()
-		//writes all the text. name, type, rules...
+		//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) {
@@ -502,20 +506,22 @@ function cardClock() {
 		// card.lineTo(688, 1044)
 		// card.stroke()
 		//Horizontal Line
-		//card.beginPath()
-		//card.moveTo(0, setSymbolY)
-		//card.lineTo(749, setSymbolY)
-		//card.stroke()
+		// 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)
-
-
-//The two following functions load different types of borders
-function changeBorder() {
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//The two following functions load border images
+function changeTemplate() {
 	//the loadScript function is located in data/scripts/loadScript.js. It sets values to variables such as set symbol coordinates or title font
 	loadScript("data/borders/defaultBorder.js")
 }
-function updateBorder() {
+function finishTemplate() {
 	//This is a seperate function to insure that the border.js file finishes running before running a few last commands
 	document.getElementById("colorSelection").value = "white"
 	imgMultiMask.src = borderPath + "multiMask.png"
@@ -527,10 +533,10 @@ function updateBorder() {
 	} else if (eighthInfo == true) {
 		imgBorderMask.src = borderPath + "frameMask.png"
 	}
-	updateColor()
+	updateBorder()
 }
 //Loads the images for the card frame, power toughness box, and rare stamp
-function updateColor() {
+function updateBorder() {
 	borderPath = "data/borders/" + document.getElementById("borderSelection").value
 	secondColor = document.getElementById("checkboxSecondColor").checked
 	thirdColor = document.getElementById("checkboxThirdColor").checked
@@ -538,14 +544,15 @@ function updateColor() {
 	var secondColorPath = borderPath + document.getElementById("secondColorSelection").value
 	var thirdColorPath = borderPath + document.getElementById("thirdColorSelection").value
 	var altframe = ""
+	imgArtMask.src = borderPath + "artMask.png"
+	imgBorderColor.src = firstColorPath + "/frame.png"
+	imgSecondBorderColor.src = secondColorPath + "/frame.png"
+	imgThirdBorderColor.src = thirdColorPath + "/frame.png"
 	if (document.getElementById("checkboxFlippedDark").checked == true && flipBorder == true) {
 		altframe = "dark"
 	} else {
 		altframe = ""
 	}
-	imgBorderColor.src = firstColorPath + "/frame.png"
-	imgSecondBorderColor.src = secondColorPath + "/frame.png"
-	imgThirdBorderColor.src = thirdColorPath + "/frame.png"
 	if (thirdColor == true) {
 		imgBorderCreature.src = thirdColorPath + "/" +  altframe + "pt.png"
 	} else if (secondColor == true) {
@@ -592,90 +599,85 @@ function updateColor() {
 		imgBorderFlipCircle.src = firstColorPath + "/flipCircle.png"
 		imgBorderFlipIcon.src = "data/borders/icons/" + document.getElementById("inputFlipIcon").value
 	}
-}
-//Draw Picture
-function drawPicture() {
-	//scales the card art and draws it
-	var imageScale = document.getElementById("imageSize").value * 0.01
-	var imageLeftShift = parseInt(document.getElementById("imageLeft").value)
-	var imageUpShift = parseInt(document.getElementById("imageUp").value)
-	if (imgArt.width > 0) {
-		//drawMask(imgArt, 58 - imageLeftShift, 118 - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale, imgArtMask, false, false)
+	//This creates a short pause in order to allow all images to finish loading
+	imgBorderColor.onload = function() {
+		setTimeout(createBorder, 50)
 	}
-	card.drawImage(imgArt, 58 - imageLeftShift, 118 - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale)
 }
-//Draw Border
-function drawBorder() {
-	//These if else statements check to see whether or not to draw different parts of the card, like the legendary border or rare stamp, and draws them in the appropriate order such that when multiple border colors are used the gradients overlap correctly
+//Once the border images have finished loading, they are all drawn into a temporary canvas then saved to a single image
+function createBorder() {
+	//These if else statements check to see whether or not to draw different parts of the card, like the legendary border or rare stamp, and draws them in the appropriate order so that when multiple border colors are used the gradients overlap correctly
+	//BACKGROUND COLOR
+	drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, border, imgCardMask, false, false)
 	//MAIN CARD FRAME
-	drawMask(imgBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
-	if (secondColor == true) {
-		drawMask(imgSecondBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiGradient, "reverseSecond")
+	drawMask(imgBorderColor, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
+	if (secondColor == true && secondBorder == true) {
+		drawMask(imgSecondBorderColor, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiGradient, "reverseSecond")
 	}
-	if (thirdColor == true) {
-		drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiMask, false)
+	if (thirdColor == true && thirdBorder == true) {
+		drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiMask, false)
 	}
 	//Draws the silver border usually on un-cards
 	if (document.getElementById("checkboxSilverBorder").checked == true) {
-		drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, imgBorderMask, imgFrameMask, "reverseSecond")
+		drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, border, imgBorderMask, imgFrameMask, "reverseSecond")
 	}
 	//NYX
 	if (document.getElementById("checkboxNyx").checked == true && nyxBorder == true) {
 		if (thirdColor == true) {
-			drawMask(imgBorderNyx, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiMask, false)
+			drawMask(imgBorderNyx, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiMask, false)
 		} else {
-			drawMask(imgBorderNyx, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
+			drawMask(imgBorderNyx, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
 			if (secondColor == true) {
-				drawMask(imgSecondBorderNyx, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiGradient, "reverseSecond")
+				drawMask(imgSecondBorderNyx, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiGradient, "reverseSecond")
 			}
 		}	
 	}
 	//MIRACLE
 	if (document.getElementById("checkboxMiracle").checked == true && miracleBorder == true) {
 		if (thirdColor == true) {
-			drawMask(imgBorderMiracle, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
+			drawMask(imgBorderMiracle, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
 		} else {
-			drawMask(imgBorderMiracle, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
+			drawMask(imgBorderMiracle, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
 			if (secondColor == true) {
-				drawMask(imgSecondBorderMiracle, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiGradient, "reverseSecond")
+				drawMask(imgSecondBorderMiracle, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiGradient, "reverseSecond")
 			}
 		}
 	}
 	//LEGENDARY
 	if (document.getElementById("checkboxLegendary").checked == true && legendaryBorder == true) {
-		drawMask(imgBorderLegendary, 0, 0, canvas.width, canvas.height, imgLegendFrameMask, false, false)
+		drawMask(imgBorderLegendary, 0, 0, canvas.width, canvas.height, border, imgLegendFrameMask, false, false)
 		if (secondColor == true) {
-			drawMask(imgSecondBorderLegendary, 0, 0, canvas.width, canvas.height, imgLegendFrameMask, imgMultiGradient, "reverseSecond")
+			drawMask(imgSecondBorderLegendary, 0, 0, canvas.width, canvas.height, border, imgLegendFrameMask, imgMultiGradient, "reverseSecond")
 		}
 		//redraws the custom-color border to match the legendary frame
-		drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, imgBorderMask, imgLegendFrameMask, "reverseSecond")
+		drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, border, imgBorderMask, imgLegendFrameMask, "reverseSecond")
 		//redraws the silver border usually on un-cards to match the legendary frame
 		if (document.getElementById("checkboxSilverBorder").checked == true) {
-			drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, imgBorderMask, imgLegendFrameMask, "reverseSecond")
+			drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, border, imgBorderMask, imgLegendFrameMask, "reverseSecond")
 		}
 	}
 	//FLIP CARDS
 	if (flipBorder == true) {
 		if (document.getElementById("checkboxFlippedDark").checked == true && flipBorder == true) {
 			if (thirdColor == true) {
-				drawMask(imgBorderFlippedDark, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
+				drawMask(imgBorderFlippedDark, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
 			} else {
-				drawMask(imgBorderFlippedDark, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
+				drawMask(imgBorderFlippedDark, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
 				if (secondColor == true) {
-					drawMask(imgSecondBorderFlippedDark, 0, 0, canvas.width, canvas.height, imgSecondBorderFlippedDark, imgMultiGradient, "reverseSecond")
+					drawMask(imgSecondBorderFlippedDark, 0, 0, canvas.width, canvas.height, border, imgSecondBorderFlippedDark, imgMultiGradient, "reverseSecond")
 				}
 			}
 		}
 		if (document.getElementById("checkboxFlipIcon").checked == true) {
-			card.drawImage(imgBorderFlipCircle, 0, 0, canvas.width, canvas.height)
-			card.drawImage(imgBorderFlipIcon, 39, 51, 60, 60)
+			border.drawImage(imgBorderFlipCircle, 0, 0, canvas.width, canvas.height)
+			border.drawImage(imgBorderFlipIcon, 39, 51, 60, 60)
 		}
 		if (document.getElementById("checkboxFlipTip").checked == true) {
-			card.drawImage(imgBorderFlipTip, 0, 0, canvas.width, canvas.height)
-			card.fillStyle="#666"
+			border.drawImage(imgBorderFlipTip, 0, 0, canvas.width, canvas.height)
+			border.fillStyle="#666"
 			canvas.style.letterSpacing = "0px"
-			card.font = "28px belerenb"
-			card.fillText(document.getElementById("inputFlipTip").value, 688 - card.measureText(document.getElementById("inputFlipTip").value).width, 880)
+			border.font = "28px belerenb"
+			border.fillText(document.getElementById("inputFlipTip").value, 688 - border.measureText(document.getElementById("inputFlipTip").value).width, 880)
 		}
 		if (document.getElementById("checkboxFlipIcon").checked == true || document.getElementById("checkboxFlippedDark").checked == true) {
 			titleRightShift = 50
@@ -692,70 +694,82 @@ function drawBorder() {
 		var identityY = typeY + 21
 		switch (identityList.length) {
 			case 1:
-				var originAngle = 0
-				break;
+			var originAngle = 0
+			break;
 			case 2:
-				var originAngle = 3 * Math.PI / 4
-				break;
+			var originAngle = 3 * Math.PI / 4
+			break;
 			case 3:
-				var originAngle = 7 * Math.PI / 6
-				break;
+			var originAngle = 7 * Math.PI / 6
+			break;
 			case 4:
-				var originAngle = 3 * Math.PI / 2
-				break;
+			var originAngle = 3 * Math.PI / 2
+			break;
 			case 5:
-				var originAngle = 13 * Math.PI / 10
-				break;
+			var originAngle = 13 * Math.PI / 10
+			break;
 			default:
-				var originAngle = 0
+			var originAngle = 0
 		}
 		for (i = 0; i < identityList.length; i ++) {
 			switch (identityList[i]) {
 				case "w":
-					card.fillStyle = "#f3f2ef"
-					break;
+				border.fillStyle = "#f3f2ef"
+				break;
 				case "u":
-					card.fillStyle = "#1d7097"
-					break;
+				border.fillStyle = "#1d7097"
+				break;
 				case "b":
-					card.fillStyle = "#31302e"
-					break;
+				border.fillStyle = "#31302e"
+				break;
 				case "r":
-					card.fillStyle = "#bf544c"
-					break;
+				border.fillStyle = "#bf544c"
+				break;
 				case "g":
-					card.fillStyle = "#1c6449"
-					break;
+				border.fillStyle = "#1c6449"
+				break;
 				case "m":
-					card.fillStyle = "#e3d591"
-					break;
+				border.fillStyle = "#e3d591"
+				break;
 				default:
-					card.fillStyle = "#e0e0e0"
+				border.fillStyle = "#e0e0e0"
 			}
 			var startAngle = originAngle + i * angleSize
-			card.beginPath()
-			card.moveTo(identityX, identityY)
-			card.arc(identityX, identityY, identityRadius, startAngle, startAngle + angleSize)
-			card.lineTo(identityX, identityY)
-			card.fill()
+			border.beginPath()
+			border.moveTo(identityX, identityY)
+			border.arc(identityX, identityY, identityRadius, startAngle, startAngle + angleSize)
+			border.lineTo(identityX, identityY)
+			border.fill()
 		}
-		card.drawImage(imgIdentity, identityX - identityRadius, identityY - identityRadius, 2 * identityRadius, 2 * identityRadius)
+		border.drawImage(imgIdentity, identityX - identityRadius, identityY - identityRadius, 2 * identityRadius, 2 * identityRadius)
 		typeRightShift = 33
 	} else {
 		typeRightShift = 0
 	}
 	//RARE STAMP
 	if (document.getElementById("checkboxRareStamp").checked == true && stampBorder == true) {
-		card.drawImage(imgBorderRareStamp, 329, rareStampY - 15, 90, 50)
+		border.drawImage(imgBorderRareStamp, 329, rareStampY - 15, 90, 50)
 
 		if (document.getElementById("checkboxSecondColor").checked == true) {
-			drawMask(imgSecondBorderRareStamp, 329, rareStampY - 15, 90, 50, imgSecondBorderRareStamp, imgStampGradient, "reverseSecond")
+			drawMask(imgSecondBorderRareStamp, 329, rareStampY - 15, 90, 50, border, imgSecondBorderRareStamp, imgStampGradient, "reverseSecond")
 		}
-		//Draws over the rare stamp (part that's usually back) to match custom border color
-		drawMask(document.getElementById("inputColor").value, 329, rareStampY - 15, 90, 50, imgRareStampMask, false, false)
+		//Draws over the rare stamp (part that's usually black) to match custom border color
+		drawMask(document.getElementById("inputColor").value, 329, rareStampY - 15, 90, 50, border, imgRareStampMask, false, false)
 		//This is when the holo stamp is drawn
-		card.drawImage(imgRareStamp, 340, rareStampY, 70, 37)
+		border.drawImage(imgRareStamp, 340, rareStampY, 70, 37)
 	}
+	imgBorder.src = borderCanvas.toDataURL()
+}
+//Draw Picture
+function drawPicture() {
+	//scales the card art and draws it
+	var imageScale = document.getElementById("imageSize").value * 0.01
+	var imageLeftShift = parseInt(document.getElementById("imageLeft").value)
+	var imageUpShift = parseInt(document.getElementById("imageUp").value)
+	if (imgArt.width > 0) {
+		//drawMask(imgArt, artX - imageLeftShift, artY - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale, card, imgArtMask, false, false)
+	}
+	card.drawImage(imgArt, artX - imageLeftShift, artY - imageUpShift, imgArt.width * imageScale, imgArt.height * imageScale)
 }
 //Draw Set Symbol
 function drawSetSymbol() {
@@ -770,7 +784,7 @@ function drawSetSymbol() {
 		height *= document.getElementById("setSymbolSize").value / 100
 		width *= document.getElementById("setSymbolSize").value / 100
 		var y = setSymbolY - height / 2
-		var x = setSymbolRight - width
+		var x = setSymbolRight - width / centerSetSymbol
 		card.drawImage(imgSetSymbol, x, y, width, height)
 	}
 }
@@ -790,10 +804,10 @@ function drawWatermark() {
 		card.globalAlpha = 0.4
 	    //if the following if statement is true, the watermark will be drawn in two halves of the chosen colors. Otherwise, a single watermark of the first chosen color is drawn.
 	    if (document.getElementById("checkboxSecondWatermarkColor").checked == true) {
-	    	drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, imgWatermark, imgMultiGradient, false)
-	    	drawMask(document.getElementById("secondWatermarkColorSelection").value, x, y, width, height, imgWatermark, imgMultiGradient, "reverseSecond")
+	    	drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, card, imgWatermark, imgMultiGradient, false)
+	    	drawMask(document.getElementById("secondWatermarkColorSelection").value, x, y, width, height, card, imgWatermark, imgMultiGradient, "reverseSecond")
 	    } else {
-	    	drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, imgWatermark, false, false)
+	    	drawMask(document.getElementById("watermarkColorSelection").value, x, y, width, height, card, imgWatermark, false, false)
 	    }
 	    card.globalAlpha = 1
 	}
@@ -825,14 +839,17 @@ function writeText() {
 		card.fillStyle = "Black"
 	}
 	//Title
+	card.textAlign = titleAlign
 	canvas.style.letterSpacing = titleFontSpacing
 	card.font = titleFont	
 	card.fillText(document.getElementById("inputName").value, titleX + titleRightShift, titleY)
 	//Type
+	card.textAlign = typeAlign
 	canvas.style.letterSpacing = typeFontSpacing
 	card.font = typeFont
 	card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY)
 	//Power/Toughness
+	card.textAlign = "left"
 	if (document.getElementById("checkboxCreature").checked == true) {
 		card.drawImage(imgBorderCreature, ptX, ptY, ptWidth, ptHeight)
 		canvas.style.letterSpacing = ptFontSpacing
@@ -860,7 +877,7 @@ function bottomInfoM15() {
 	var bottomLine = document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value
 	card.fillText(bottomLine, 48, m15InfoY)
 	var artistBrushShift = card.measureText(bottomLine).width + 58
-	drawMask(card.fillStyle, artistBrushShift, m15InfoY + 5, 21, 13, imgArtistBrush, false, false)
+	drawMask(card.fillStyle, artistBrushShift, m15InfoY + 5, 21, 13, card, imgArtistBrush, false, false)
 	canvas.style.letterSpacing = "1.3px"
 	card.font = "19.5px relaymedium"
 	card.fillText(document.getElementById("inputNumber").value, 49, m15InfoY - 20)
@@ -974,7 +991,7 @@ function drawText(text, xCoord, yCoord) {
 						textXShift = 0
 						y += 2 * lineSpace + textSize + 3
 					} else {
-						card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0])], x + textXShift + textSize * 0.054, y + textSize * 0.19, textSize * 0.77, textSize * 0.77)
+						card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0])], x + textXShift + textSize * 0.054, y + textSize * 0.17, textSize * 0.77, textSize * 0.77)
 						textXShift += textSize * 0.84
 					}
 					if (megaSplit[1] != "") {