dynamic plane card size

data/borders/defaultBorder.js

@@ -23,10 +23,8 @@ var centerSetSymbol = 1 //1=not centered, 2=centered
 var artX = 58
 var artY = 118
 //card size
-canvas.width = 749
-canvas.height = 1044
-borderCanvas.width = 749
-borderCanvas.height = 1044
+cardWidth = 749
+cardHeight = 1044
 //Loads the correct border data
 borderPath = "data/borders/" + document.getElementById("borderSelection").value
 loadScript(borderPath + "border.js")

data/borders/m15/border.js

@@ -1,50 +1,48 @@
 //M15 Border
 //Anything to do with...
 //Card Title
-var titleFont = "40px belerenb"
-var titleFontSpacing = "0.15px"
-var titleX = 62
-var titleY = 56
+var titleFont = "40px belerenb" //40
+var titleFontSpacing = "0.15px" //0.15
+var titleX = 62 //62
+var titleY = 56 //56
 //Mana Cost
-var manaCostRadius = 17.5
-var manaCostX = 657
-var manaCostY = 59
+var manaCostRadius = 17.5 //17.5
+var manaCostX = 657 //657
+var manaCostY = 59 //59
 //Card Type
-var typeFont = "33.5px belerenb"
-var typeFontSpacing = "0.05px"
-var typeX = 62
-var typeY = 595
+var typeFont = "33.5px belerenb" //33.5
+var typeFontSpacing = "0.05px" //0.05
+var typeX = 62 //62
+var typeY = 595 //595
 //Rules/Flavor Text
 var textFont = "px mplantin"
-var textFontSpacing = 1.3
-var textX = 66
-var textY = 656
-var textWidth = 682
+var textFontSpacing = 1.3 //1.3
+var textX = 66 //66
+var textY = 656 //656
+var textWidth = 682 //682
 //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
+var ptFont = "39px belerenb" //39
+var ptFontSpacing = "0.3px" //0.3
+var ptTextX = 645 //645
+var ptTextY = 936 //936
+var ptX = 571 //571
+var ptY = 929 //929
+var ptWidth = 137 //137
+var ptHeight = 75 //75
 //Bottom Info
-var eighthInfo = false
-var eighthInfoY = 992
 var m15Info = true
-var m15InfoY = 993
+var m15InfoY = 993 //993
 //Set Symbol
-var setSymbolY = 616
-var setSymbolRight = 693
-var setSymbolWidth = 77
-var setSymbolHeight = 44
+var setSymbolY = 616 //616
+var setSymbolRight = 693 //693
+var setSymbolWidth = 77 //77
+var setSymbolHeight = 44 //44
 //Watermark
-var watermarkWidth = 520
-var watermarkHeight = 250
-var watermarkY = 805
+var watermarkWidth = 520 //520
+var watermarkHeight = 250 //250
+var watermarkY = 805 //805
 //Rare Stamp
-var rareStampY = 958
+var rareStampY = 958 //958
 //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,vehicle-Vehicle")
 document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML

data/borders/plane/border.js

@@ -1,55 +1,52 @@
 //Plane Border
 //Anything to do with...
+//Card Size
+cardWidth = 1074
+cardHeight = 749
 //Card Title
-var titleFont = "34px belerenb"
-var titleFontSpacing = "0.15px"
-var titleX = 522
-var titleY = 40
+var titleFont = cardHeight * 0.0454 + "px belerenb" //34
+var titleFontSpacing = cardWidth * 0.00014 + "px" //0.15
+var titleX = cardWidth * 0.5000 //522
+var titleY = cardHeight * 0.0534 //40
 var titleAlign = "center"
 //Mana Cost
 var manaCostRadius = 0
-var manaCostX = 1000
-var manaCostY = 1000
+var manaCostX = 0
+var manaCostY = 0
 //Card Type
-var typeFont = "26px belerenb"
-var typeFontSpacing = "0px"
-var typeX = 522
-var typeY = 502
+var typeFont = cardHeight * 0.0347 + "px belerenb" //26
+var typeFontSpacing = "0px" //0
+var typeX = cardWidth * 0.5000 //522
+var typeY = cardHeight * 0.6702 //502
 var typeAlign = "center"
 //Rules/Flavor Text
 var textFont = "px mplantin"
-var textFontSpacing = 0.2
-var textX = 124
-var textY = 535
-var textWidth = 925
-document.getElementById("textSize").value = 26
+var textFontSpacing = cardWidth * 0.0002 //0.2
+var textX = cardWidth * 0.1188 //124
+var textY = cardHeight * 0.7143 //535
+var textWidth = cardWidth * 0.8860 //925
+document.getElementById("textSize").value = Math.floor(cardHeight * 0.0348) //26
 //Bottom Info
 var planechaseInfo = true
 //Set Symbol
-var setSymbolY = 519
-var setSymbolRight = 814
-var setSymbolWidth = 42
-var setSymbolHeight = 24
+var setSymbolY = cardHeight * 0.6929 //519
+var setSymbolRight = cardWidth * 0.7797 //814
+var setSymbolWidth = cardWidth * 0.0402 //42
+var setSymbolHeight = cardHeight * 0.0320 //24
 //Watermark
 var watermarkWidth =  0 //520
 var watermarkHeight = 0 //250
-var watermarkY = 600
-// //Rare Stamp
-// var rareStampY = 958
+var watermarkY = 600 //600
 //Color Options
 loadColors("white-Regular,high-Bottom,mid-Middle,low-Top,none-Single")
 document.getElementById("secondColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
 document.getElementById("thirdColorSelection").innerHTML = document.getElementById("colorSelection").innerHTML
 //Other
-canvas.width = 1044
-canvas.height = 749
-borderCanvas.width = 1044
-borderCanvas.height = 749
 var creatureBorder = false
 var thirdBorder = false
 var secondBorder = false
-var artX = 33
-var artY = 33
+var artX = cardWidth * 0.0316 //33
+var artY = cardHeight * 0.0441 //33
 transparentBorder = true
 //With all the new values in place, the program will update it's border images
 finishTemplate()
@@ -63,7 +60,6 @@ function bottomInfoPlanechase() {
 	}
 	var bottomLineFirst = document.getElementById("inputNumber").value + " " + document.getElementById("inputSet").value + " \u00b7 " + document.getElementById("inputLanguage").value
 	var bottomLineSecond
-	var artistBrushShift = 0
 	if (document.getElementById("inputInfo").value != "") {
 		bottomLineSecond = "CC \u2014 " + document.getElementById("inputInfo").value
 		if (bottomLineSecond == "CC \u2014 secretcode") {
@@ -74,24 +70,24 @@ function bottomInfoPlanechase() {
 	}
 	var artist = document.getElementById("inputArtist").value
 	//Artist
-	canvas.style.letterSpacing = "-0.2px"
-	card.font = "16px matrixbsc"
-	var artistLineWidth = (card.measureText(artist).width + 18) / 2
-	drawMask(card.fillStyle, canvas.width / 2 - artistLineWidth, 706, 15, 10, card, imgArtistBrush, false, false)
-	card.fillText(artist, canvas.width / 2 - artistLineWidth + 18, 704)
+	canvas.style.letterSpacing = cardWidth * -0.0002 + "px" //-0.2
+	card.font = "16px matrixbsc" //16
+	var artistLineWidth = (card.measureText(artist).width + cardWidth * 0.01724) / 2 //18
+	drawMask(card.fillStyle, cardWidth / 2 - artistLineWidth, cardHeight * 0.9426, cardWidth * 0.0144, cardHeight * 0.0134, card, imgArtistBrush, false, false) //706, 15, 10
+	card.fillText(artist, cardWidth / 2 - artistLineWidth + cardWidth * 0.01724, cardHeight * 0.9400) //18, 704
 	//Left and Right side
 	canvas.style.letterSpacing = "0px"
-	card.font = "16px relaymedium"
-	var firstWidth = card.measureText(bottomLineFirst).width + 15
-	canvas.style.letterSpacing = "-0.7px"
-	card.font = "13px mplantin"
+	card.font = cardHeight * 0.0187 + "px relaymedium" //14
+	var firstWidth = card.measureText(bottomLineFirst).width + cardWidth * 0.0144 //15
+	canvas.style.letterSpacing = cardWidth * -0.0007 + "px" //-0.7
+	card.font = cardHeight * 0.0187 + "px mplantin" //14
 	var secondWidth = card.measureText(bottomLineSecond).width
 
 	canvas.style.letterSpacing = "0px"
-	card.font = "16px relaymedium"
-	card.fillText(bottomLineFirst, canvas.width / 2 - ((secondWidth + firstWidth) / 2) - 8, 717)
+	card.font = cardHeight * 0.0187 + "px relaymedium" //14
+	card.fillText(bottomLineFirst, cardWidth / 2 - ((secondWidth + firstWidth) / 2) - cardWidth * 0.0077, cardHeight * 0.9586) //8, 718
 
-	canvas.style.letterSpacing = "-0.7px"
-	card.font = "14px mplantin"
-	card.fillText(bottomLineSecond, canvas.width / 2 - ((secondWidth + firstWidth) / 2) + firstWidth - 8, 718)
+	canvas.style.letterSpacing = cardWidth * -0.0007 + "px" //-0.7
+	card.font = cardHeight * 0.0187 + "px mplantin" //14
+	card.fillText(bottomLineSecond, cardWidth / 2 - ((secondWidth + firstWidth) / 2) + firstWidth - cardWidth * 0.0077, cardHeight * 0.9586) //8, 718
 }

index.html

@@ -210,9 +210,9 @@
 	</div>
 	<div class="row" style="background-color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(128, 255, 128, 0.1); padding-top: 5px">
 		Check out some samples! <br/>
-		<img id="sampleCardA" src="sampleCards/sample-card-1.png" style="width: calc(33.33%);" class="column"></img>
-		<img id="sampleCardB" src="sampleCards/sample-card-2.png" style="width: calc(33.33%);" class="column"></img>
-		<img id="sampleCardC" src="sampleCards/sample-card-3.png" style="width: calc(33.33%);" class="column"></img>
+		<img id="sampleCardA" style="width: 33.33%;" class="column"></img>
+		<img id="sampleCardB" style="width: 33.33%;" class="column"></img>
+		<img id="sampleCardC" style="width: 33.33%;" class="column"></img>
 	</div>
 	<div class="row info" style="">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">the Github page</a>.</div>
 </body>
@@ -221,6 +221,7 @@
 
 <!--CSS-->
 <style>
+/*fonts*/
 @font-face {
 	font-family: relaymedium;
 	src: url("data/fonts/relay-medium.ttf");
@@ -253,19 +254,13 @@
 	font-family: mplantini;
 	src: url("data/fonts/mplantin-i.ttf");
 }
+/*Applies to most elements (with rows and columns)*/
 * {
 	text-align: center;
 	font-family: belerenb;
-	font-size: 20px;
+	font-size: 22px;
 	color: rgb(128, 128, 128);
 }
-.title {
-	text-align: center;
-	color: rgb(128,255,128);
-	font-family: belerenbsc;
-	font-size: 60px;
-}
-
 .row {
 	margin-bottom: 5;
 }
@@ -277,20 +272,16 @@
 .row * {
 	box-sizing: border-box;
 	padding: 5px;
-	
 }
 .column {
 	float: left;
 }
-
+/*Style for sections, togglers, and togglees*/
 .section {
 	border: 1px solid rgba(128, 255, 128, 0.1);
 	background-color: rgba(0, 0, 0, 0.5);
 	padding: 0px;
 }
-.section * {
-	color: rgb(255, 255, 255);
-}
 .toggler {
 	width: 100%;
 }
@@ -308,16 +299,21 @@
 .shown {
 	display: block;
 }
-input[type="text"], input[type="number"] {
+/*Specific input element styles*/
+input[type="text"], input[type="number"], textarea {
 	text-align: left;
 	color: black;
 	width: 99%;
 }
-select, select * {
+input[type="color"] {
+	padding-top: 0px;
+	padding-bottom: 0px;
+}
+select, option {
 	color: black;
 	width: 100%;
 }
-
+/*List of all mana symbols and their associated codes*/
 #symbolList {
 	border: 1px solid rgba(128, 255, 128, 0.1);
 	background-color: rgba(0, 0, 0, 0.5);
@@ -329,7 +325,13 @@ select, select * {
 	top: 8px;
 	width: 30px;
 	/*padding: 0px 0px 0px 0px !important;*/
-	background-color: rgba(128,255,128, 0.1);
+}
+/*Other*/
+.title {
+	text-align: center;
+	color: rgb(128,255,128);
+	font-family: belerenbsc;
+	font-size: 60px;
 }
 .info, .info * {
 	color: rgb(96,96,96);
@@ -343,7 +345,7 @@ html {
 	-o-background-size: cover;
 	background-size: cover;
 }
-
+/*Hyperlinks*/
 a:link {
 	color: rgb(128,128,128); 
 }
@@ -363,7 +365,6 @@ 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")
 //document.body.appendChild(borderCanvas)
 //Load the initial border (m15)
@@ -429,15 +430,15 @@ 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, card, imgCardMask, false, false)
+		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, canvas.width, canvas.height, card, imgArtMask, false, false)
+			drawMask(imgBorder, 0, 0, cardWidth, cardHeight, card, imgArtMask, false, false)
 		} else {
-			card.drawImage(imgBorder, 0, 0, canvas.width, canvas.height)
+			card.drawImage(imgBorder, 0, 0, cardWidth, cardHeight)
 		}
 		//draws the set symbol, mana cost, and watermark
 		drawSetSymbol()
@@ -455,7 +456,7 @@ function cardClock() {
 		}
 		//A shiny foil overlay!
 		if(document.getElementById("checkboxFoil").checked == true) {
-			card.drawImage(imgFoil, 0, 0, canvas.width, canvas.height)
+			card.drawImage(imgFoil, 0, 0, cardWidth, cardHeight)
 		}
 		//These are for pinpointing coordinates while adjusting values for new border types
 		//Vertical Line
@@ -481,6 +482,11 @@ function changeTemplate() {
 }
 function finishTemplate() {
 	//This is a seperate function to insure that the border.js file finishes running before running a few last commands
+	canvas.width = cardWidth
+	canvas.height = cardHeight
+	borderCanvas.width = cardWidth
+	borderCanvas.height = cardHeight
+	resizeThings()
 	document.getElementById("colorSelection").value = "white"
 	imgMultiMask.src = borderPath + "multiMask.png"
 	imgFrameMask.src = borderPath + "frameMask.png"
@@ -577,73 +583,73 @@ function updateBorder() {
 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
-	border.clearRect(0, 0, canvas.width, canvas.height)
-	drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, border, imgArtMask, false, false)
+	border.clearRect(0, 0, cardWidth, cardHeight)
+	drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, border, imgArtMask, false, false)
 	//MAIN CARD FRAME
-	drawMask(imgBorderColor, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
+	drawMask(imgBorderColor, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
 	if (secondColor == true && secondBorder == true) {
-		drawMask(imgSecondBorderColor, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiGradient, "reverseSecond")
+		drawMask(imgSecondBorderColor, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiGradient, "reverseSecond")
 	}
 	if (thirdColor == true && thirdBorder == true) {
-		drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiMask, false)
+		drawMask(imgThirdBorderColor, 0, 0, cardWidth, cardHeight, 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, border, imgBorderMask, imgFrameMask, "reverseSecond")
+		drawMask("#a3aeb7", 0, 0, cardWidth, cardHeight, border, imgBorderMask, imgFrameMask, "reverseSecond")
 	}
 	//NYX
 	if (document.getElementById("checkboxNyx").checked == true && nyxBorder == true) {
 		if (thirdColor == true) {
-			drawMask(imgBorderNyx, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiMask, false)
+			drawMask(imgBorderNyx, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiMask, false)
 		} else {
-			drawMask(imgBorderNyx, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
+			drawMask(imgBorderNyx, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
 			if (secondColor == true) {
-				drawMask(imgSecondBorderNyx, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiGradient, "reverseSecond")
+				drawMask(imgSecondBorderNyx, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiGradient, "reverseSecond")
 			}
 		}	
 	}
 	//MIRACLE
 	if (document.getElementById("checkboxMiracle").checked == true && miracleBorder == true) {
 		if (thirdColor == true) {
-			drawMask(imgBorderMiracle, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
+			drawMask(imgBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
 		} else {
-			drawMask(imgBorderMiracle, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
+			drawMask(imgBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
 			if (secondColor == true) {
-				drawMask(imgSecondBorderMiracle, 0, 0, canvas.width, canvas.height, border, imgFrameMask, imgMultiGradient, "reverseSecond")
+				drawMask(imgSecondBorderMiracle, 0, 0, cardWidth, cardHeight, border, imgFrameMask, imgMultiGradient, "reverseSecond")
 			}
 		}
 	}
 	//LEGENDARY
 	if (document.getElementById("checkboxLegendary").checked == true && legendaryBorder == true) {
-		drawMask(imgBorderLegendary, 0, 0, canvas.width, canvas.height, border, imgLegendFrameMask, false, false)
+		drawMask(imgBorderLegendary, 0, 0, cardWidth, cardHeight, border, imgLegendFrameMask, false, false)
 		if (secondColor == true) {
-			drawMask(imgSecondBorderLegendary, 0, 0, canvas.width, canvas.height, border, imgLegendFrameMask, imgMultiGradient, "reverseSecond")
+			drawMask(imgSecondBorderLegendary, 0, 0, cardWidth, cardHeight, 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, border, imgBorderMask, imgLegendFrameMask, "reverseSecond")
+		drawMask(document.getElementById("inputColor").value, 0, 0, cardWidth, cardHeight, 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, border, imgBorderMask, imgLegendFrameMask, "reverseSecond")
+			drawMask("#a3aeb7", 0, 0, cardWidth, cardHeight, 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, border, imgFrameMask, false, false)
+				drawMask(imgBorderFlippedDark, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
 			} else {
-				drawMask(imgBorderFlippedDark, 0, 0, canvas.width, canvas.height, border, imgFrameMask, false, false)
+				drawMask(imgBorderFlippedDark, 0, 0, cardWidth, cardHeight, border, imgFrameMask, false, false)
 				if (secondColor == true) {
-					drawMask(imgSecondBorderFlippedDark, 0, 0, canvas.width, canvas.height, border, imgSecondBorderFlippedDark, imgMultiGradient, "reverseSecond")
+					drawMask(imgSecondBorderFlippedDark, 0, 0, cardWidth, cardHeight, border, imgSecondBorderFlippedDark, imgMultiGradient, "reverseSecond")
 				}
 			}
 		}
 		if (document.getElementById("checkboxFlipIcon").checked == true) {
-			border.drawImage(imgBorderFlipCircle, 0, 0, canvas.width, canvas.height)
+			border.drawImage(imgBorderFlipCircle, 0, 0, cardWidth, cardHeight)
 			border.drawImage(imgBorderFlipIcon, 39, 51, 60, 60)
 		}
 		if (document.getElementById("checkboxFlipTip").checked == true) {
-			border.drawImage(imgBorderFlipTip, 0, 0, canvas.width, canvas.height)
+			border.drawImage(imgBorderFlipTip, 0, 0, cardWidth, cardHeight)
 			border.fillStyle="#666"
 			canvas.style.letterSpacing = "0px"
 			border.font = "28px belerenb"
@@ -768,7 +774,7 @@ function drawWatermark() {
 			width = watermarkWidth
 			height = imgWatermark.height * (width / imgWatermark.width)
 		}
-		var x = canvas.width / 2 - width / 2
+		var x = cardWidth / 2 - width / 2
 		var y = watermarkY - height / 2
 		//globalAlpha insures that the watermark is drawn partially transparent. This value may not be perfect but the watermark colors are calibrated to it
 		card.globalAlpha = 0.4
@@ -819,14 +825,15 @@ function writeText() {
 	card.font = typeFont
 	card.fillText(document.getElementById("inputType").value, typeX + typeRightShift, typeY)
 	//Power/Toughness
-	card.textAlign = "left"
 	if (document.getElementById("checkboxCreature").checked == true && creatureBorder == true) {
+		card.textAlign = "center"
 		card.drawImage(imgBorderCreature, ptX, ptY, ptWidth, ptHeight)
 		canvas.style.letterSpacing = ptFontSpacing
 		card.font = ptFont
 		powerToughness = document.getElementById("inputPowerToughness").value
-		card.fillText(powerToughness, ptTextX - (card.measureText(powerToughness).width / 2), ptTextY)
+		card.fillText(powerToughness, ptTextX, ptTextY)
 	}
+	card.textAlign = "left"
 	card.fillStyle = "Black"
 	//Rules Text
 	canvas.style.letterSpacing = textFontSpacing + "px"
@@ -940,12 +947,12 @@ function drawText(text, xCoord, yCoord) {
 						card.font = "normal " + textSize + textFont
 					} else if (megaSplit[0] == "center") {
 						card.textAlign="center"
-						x = canvas.width / 2
+						x = cardWidth / 2
 						tempTextWidth = textWidth * 1.5
 					} else if (megaSplit[0] == "right") {
 						card.textAlign="right"
 						tempTextWidth = textWidth * 1.9
-						x = canvas.width - xCoord
+						x = cardWidth - xCoord
 					} else if (megaSplit[0] == "left") {
 						card.textAlign="left"
 						tempTextWidth = textWidth
@@ -957,7 +964,7 @@ function drawText(text, xCoord, yCoord) {
 						textXShift = 0
 						y += textSize + 1
 					} else if (megaSplit[0] == "bar") {
-						card.drawImage(imgBar, canvas.width / 2 - imgBar.width / 2, y + textSize + lineSpace + 5)
+						card.drawImage(imgBar, cardWidth / 2 - imgBar.width / 2, y + textSize + lineSpace + 5)
 						textXShift = 0
 						y += 2 * lineSpace + textSize + 3
 					} else if (megaSplit[0] == "chaos") {
@@ -1019,8 +1026,8 @@ function toggleSection(target) {
 
 //Resizes anything that may need to be resized
 function resizeThings() {
-	if (window.innerWidth > 1100 && canvas.width <= 770) {
-		document.getElementById("optionsColumn").style = "width: calc(100% - 777px)"
+	if (window.innerWidth > 809 + 300 && cardWidth <= 749) {
+		document.getElementById("optionsColumn").style = "width: calc(100% - 769px)"
 	} else {
 		document.getElementById("optionsColumn").style = "width: 100%"
 	}