Colored borders!

index.html

@@ -394,13 +394,13 @@ var m15Info = true
 var canvas = document.getElementById("canvas")
 var card = canvas.getContext("2d")
 //Load dynamic images
-var dynamicImageList = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "secondBorderCreature", "thirdBorderCreature", "borderLegendary", "secondBorderLegendary", "thirdBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "art", "artMask", "setSymbol", "watermark", "multiMask", "LegendMultiMask", "legendSilver", "borderColorMask"]
+var dynamicImageList = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "secondBorderCreature", "thirdBorderCreature", "borderLegendary", "secondBorderLegendary", "thirdBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "art", "setSymbol", "watermark", "multiMask", "LegendMultiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask"]
 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", "silverBorder", "borderEdge"]
+var staticImageList = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask"]
 for (i = 0; i < staticImageList.length; i ++) {
 	var imgName = "img" + staticImageList[i].charAt(0).toUpperCase() + staticImageList[i].slice(1)
 	window[imgName] = new Image()
@@ -428,7 +428,7 @@ updateBorder()
 setInterval(function() {
 		//Insures that the corners of the final image are transparent
 		card.globalCompositeOperation = "source-over"
-		card.drawImage(imgCardMask, 0, 0, 749, 1044)
+		drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, imgCardMask, false, false)
 		card.globalCompositeOperation = "source-atop"
 		//These functions draw everything
 		drawPicture()
@@ -468,11 +468,12 @@ function updateBorder() {
 	//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/" + document.getElementById("borderSelection").value + "border.js")
 	document.getElementById("colorSelection").value = "white"
-	imgArtMask.src = "data/borders/" + document.getElementById("borderSelection").value + "artMask.png"
 	imgMultiMask.src = "data/borders/" + document.getElementById("borderSelection").value + "multiMask.png"
 	imgLegendMultiMask.src = "data/borders/" + document.getElementById("borderSelection").value + "legendMultiMask.png"
-	imgLegendSilver.src = "data/borders/" + document.getElementById("borderSelection").value + "legendSilver.png"
-	imgBorderColorMask.src = "data/borders/" + document.getElementById("borderSelection").value + "borderColorMask.png"
+	imgRareStampMask.src = "data/borders/" + document.getElementById("borderSelection").value + "rareStampMask.png"
+	imgFrameMask.src = "data/borders/" + document.getElementById("borderSelection").value + "frameMask.png"
+	imgLegendFrameMask.src = "data/borders/" + document.getElementById("borderSelection").value + "legendFrameMask.png"
+	imgBorderMask.src = "data/borders/" + document.getElementById("borderSelection").value + "borderMask.png"
 	updateColor()
 }
 //Loads the images for the card frame, power toughness box, and rare stamp
@@ -503,6 +504,38 @@ function drawPicture() {
 //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
+	if (document.getElementById("legendaryCheckbox").checked == true && m15Info == true) {
+		drawMask(imgBorderLegendary, 0, 0, canvas.width, canvas.height, imgLegendFrameMask, false, false)
+		if (document.getElementById("checkboxSecondColor").checked == true) {
+			drawMask(imgSecondBorderLegendary, 0, 0, canvas.width, canvas.height, imgLegendFrameMask, imgMultiGradient, "reverseSecond")
+		}
+		if (document.getElementById("checkboxThirdColor").checked == true) {
+			drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, imgLegendFrameMask, imgLegendMultiMask)
+		}
+		if (document.getElementById("silverBorderCheckbox").checked == true) {
+			drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, imgBorderMask, imgLegendFrameMask, "reverseSecond")
+		}
+	} else {
+		drawMask(imgBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, false, false)
+		if (document.getElementById("checkboxSecondColor").checked == true) {
+			drawMask(imgSecondBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiGradient, "reverseSecond")
+		}
+		if (document.getElementById("checkboxThirdColor").checked == true) {
+			drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, imgFrameMask, imgMultiMask, false)
+		}
+		if (document.getElementById("silverBorderCheckbox").checked == true) {
+			drawMask("#a3aeb7", 0, 0, canvas.width, canvas.height, imgBorderMask, imgFrameMask, "reverseSecond")
+		}
+	}
+	if (document.getElementById("rareStampCheckbox").checked == true && m15Info == true) {
+		card.drawImage(imgBorderRareStamp, 329, rareStampY - 15, 90, 50)
+		if (document.getElementById("checkboxSecondColor").checked == true) {
+			drawMask(imgSecondBorderRareStamp, 329, rareStampY - 15, 90, 50, imgSecondBorderRareStamp, imgStampGradient, "reverseSecond")
+		}
+		drawMask(document.getElementById("inputColor").value, 329, rareStampY - 15, 90, 50, imgRareStampMask, false, false)
+		card.drawImage(imgRareStamp, 340, rareStampY, 70, 37)
+	}
+	/*
 	drawMask(imgBorderColor, 0, 0, canvas.width, canvas.height, imgArtMask, false, false)
 	if (document.getElementById("checkboxSecondColor").checked == true) {
 		drawMask(imgSecondBorderColor, 0, 0, canvas.width, canvas.height, imgArtMask, imgMultiGradient, "reverseSecond")
@@ -520,6 +553,8 @@ function drawBorder() {
 				drawMask(imgThirdBorderColor, 0, 0, canvas.width, canvas.height, imgLegendMultiMask, imgArtMask, false)
 			}
 		}
+		//Draws the selected colored border
+		drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, imgBorderColorMask, false, false)
 		if (document.getElementById("rareStampCheckbox").checked == true) {
 			if (imgBorderRareStamp.width != 0) {
 				card.drawImage(imgBorderRareStamp, 329, rareStampY - 15, 90, 50)
@@ -527,22 +562,21 @@ function drawBorder() {
 					drawMask(imgSecondBorderRareStamp, 329, rareStampY - 15, 90, 50, imgSecondBorderRareStamp, imgStampGradient, "reverseSecond")
 				}
 			}
+			//draws solid color, then holo stamp
+			drawMask(document.getElementById("inputColor").value, 329, rareStampY - 15, 90, 50, imgRareStampMask, false, false)
 			card.drawImage(imgRareStamp, 340, rareStampY, 70, 37)
 		}
 	}
-	//Draws the selected colored border
-	drawMask(document.getElementById("inputColor").value, 0, 0, canvas.width, canvas.height, imgBorderColorMask, false, false)
 	if(document.getElementById("legendaryCheckbox").checked == true) {
-		//////////////////////////////////////////////////////////////////////////////////////card.drawImage(imgBorderEdge, 0, 0, canvas.width, canvas.height)
 		if (document.getElementById("silverBorderCheckbox").checked == true) {
 			drawMask(imgLegendSilver, 0, 0, canvas.width, canvas.height, imgCardMask, false, false)
 		}
 	} else {
-		/////////////////////////////////////////////////////////////////////////////////////card.drawImage(imgBorderEdge, 0, 0, canvas.width, canvas.height)
 		if (document.getElementById("silverBorderCheckbox").checked == true) {
 			card.drawImage(imgSilverBorder, 0, 0, canvas.width, canvas.height)
 		}
 	}
+	*/
 }
 //Draw Set Symbol
 function drawSetSymbol() {
@@ -648,7 +682,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
-	card.drawImage(imgArtistBrush, artistBrushShift, m15InfoY + 5, 21, 13)
+	drawMask(card.fillStyle, artistBrushShift, m15InfoY + 5, 21, 13, imgArtistBrush, false, false)
 	canvas.style.letterSpacing = "1.3px"
 	card.font = "19.5px relaymedium"
 	card.fillText(document.getElementById("inputNumber").value, 49, m15InfoY - 20)