textBaseline

This commit is contained in:
Kyle
2018-12-15 12:21:50 -08:00
parent ddf735ad87
commit 58167a25dc
10 changed files with 52 additions and 53 deletions

View File

@@ -13,7 +13,7 @@ imgTitleMask.src = borderPath + "titleMask.png"
var titleFont = "40px belerenb" //40
var titleFontSpacing = "0.15px" //0.15
var titleX = 62 //62
var titleY = 56 //56
var titleY = 62 //56 + 6
//Mana Cost
var manaCostRadius = 17.5 //17.5
var manaCostX = 657 //657
@@ -22,21 +22,21 @@ var manaCostY = 59 //59
var typeFont = "33.5px belerenb" //33.5
var typeFontSpacing = "0.05px" //0.05
var typeX = 62 //62
var typeY = 595 //595
var typeY = 601 //595 + 6
//Rules/Flavor Text
var textFont = "px mplantin"
var textFontSpacing = 0.7 //0.7
var textX = 66 //66
var textY = 656 //656
var textY = 662 //656 + 6
var textWidth = 682 //682
//Power Toughness
var ptFont = "39px belerenb" //39
var ptFontSpacing = "0.3px" //0.3
var ptTextX = 645 //645
var ptTextY = 936 //936
var ptTextY = 942 //936 + 6
imgBorderCreature.imgValues(571, 929, 137, 75)
//Bottom Info
var infoY = 993 //993
var infoY = 999 //993 + 6
//Set Symbol
var setSymbolY = 616 //616
var setSymbolRight = 693 //693

View File

@@ -7,7 +7,7 @@ imgBorderMask.src = borderPath + "borderMask.png"
var titleFont = "40px belerenbsc"
var titleFontSpacing = "0.1px"
var titleX = 374.5
var titleY = 52
var titleY = 58
var titleAlign = "center"
//Mana Cost
var manaCostRadius = 17.5
@@ -17,22 +17,22 @@ var manaCostY = 59
var typeFont = "33.5px belerenb"
var typeFontSpacing = "0.05px"
var typeX = 374.5
var typeY = 598
var typeY = 604
var typeAlign = "center"
//Rules/Flavor Text
var textFont = "px mplantin"
var textFontSpacing = 0.7
var textX = 89
var textY = 662
var textY = 668
var textWidth = 660
//Power Toughness
var ptFont = "32px belerenb"
var ptFontSpacing = "0.3px"
var ptTextX = 635
var ptTextY = 933
var ptTextY = 939
imgBorderCreature.imgValues(560, 920, 150, 70)
//Bottom Info
var infoY = 993
var infoY = 999
//Set Symbol
var setSymbolY = 123
var setSymbolRight = 374.5

View File

@@ -11,7 +11,7 @@ document.getElementsByClassName("mainGrid")[0].classList.add("plane")
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 titleY = cardHeight * 0.0614 //46
var titleAlign = "center"
//Mana Cost
var manaCostRadius = 0
@@ -21,13 +21,13 @@ var manaCostY = 0
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 typeY = cardHeight * 0.6729 //508
var typeAlign = "center"
//Rules/Flavor Text
var textFont = "px mplantin"
var textFontSpacing = cardWidth * 0.0002 //0.2
var textX = cardWidth * 0.1188 //124
var textY = cardHeight * 0.7143 //535
var textY = cardHeight * 0.7223 //541
var textWidth = cardWidth * 0.8860 //925
document.getElementById("textSize").value = Math.floor(cardHeight * 0.0348) //26
//Bottom Info
@@ -76,7 +76,7 @@ function bottomInfoPlanechase() {
var artistLineWidth = (card.measureText(artist).width + cardWidth * 0.01724) / 2 //18
imgArtistBrush.imgValues(cardWidth / 2 - artistLineWidth, cardHeight * 0.9426, cardWidth * 0.0144, cardHeight * 0.0134)
card.mask("imgArtMask,source-over", imgArtistBrush, card.fillStyle)
card.fillText(artist, cardWidth / 2 - artistLineWidth + cardWidth * 0.01724, cardHeight * 0.9400) //18, 704
card.fillText(artist, cardWidth / 2 - artistLineWidth + cardWidth * 0.01724, cardHeight * 0.9479) //18, 710
//Left and Right side
canvas.style.letterSpacing = "0px"
card.font = cardHeight * 0.0187 + "px relaymedium" //14
@@ -87,9 +87,9 @@ function bottomInfoPlanechase() {
canvas.style.letterSpacing = "0px"
card.font = cardHeight * 0.0187 + "px relaymedium" //14
card.fillText(bottomLineFirst, cardWidth / 2 - ((secondWidth + firstWidth) / 2) - cardWidth * 0.0077, cardHeight * 0.9586) //8, 718
card.fillText(bottomLineFirst, cardWidth / 2 - ((secondWidth + firstWidth) / 2) - cardWidth * 0.0077, cardHeight * 0.9666) //8, 724
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
card.fillText(bottomLineSecond, cardWidth / 2 - ((secondWidth + firstWidth) / 2) + firstWidth - cardWidth * 0.0077, cardHeight * 0.9666) //8, 724
}

View File

@@ -14,7 +14,7 @@ document.getElementById("inputCreatureColor").value = "#ffffff"
var titleFont = "40px belerenb" //40
var titleFontSpacing = "-0.1px" //-0.1
var titleX = 62 //62
var titleY = 42 //42
var titleY = 48 //48
//Mana Cost
var manaCostRadius = 17.5 //17.5
var manaCostX = 657 //657
@@ -23,21 +23,21 @@ var manaCostY = 46 //46
var typeFont = "33.5px belerenb" //33.5
var typeFontSpacing = "0.05px" //0.05
var typeX = 62 //62
var typeY = 596 //596
var typeY = 602 //602
//Rules/Flavor Text
var textFont = "px mplantin"
var textFontSpacing = -0.4 //-0.4
var textX = 134 //134
var textY = 650 //650
var textY = 656 //656
var textWidth = 682 //682
//Power Toughness
var ptFont = "39px belerenb" //39
var ptFontSpacing = "0.3px" //0.3
var ptTextX = 655 //655
var ptTextY = 935 //935
var ptTextY = 940 //940
imgBorderCreature.imgValues(598, 920, 118, 75)
//Bottom Info
var infoY = 993 //993
var infoY = 999 //993
//Set Symbol
var setSymbolY = 615 //615
var setSymbolRight = 695 //695
@@ -76,17 +76,17 @@ function planeswalkerCustomFunction() {
card.font = "31px belerenbsc"
if (loyaltyValue.charAt(0) == "-") {
card.drawImage(manaSymbolImages[58], 34, abilityLineY + abilityLines[i] / 2 - 28, 84, 64)
card.fillText(loyaltyValue, 76, abilityLineY + abilityLines[i] / 2 - 22)
card.fillText(loyaltyValue, 76, abilityLineY + abilityLines[i] / 2 - 17)
} else if (loyaltyValue.charAt(0) == "+") {
card.drawImage(manaSymbolImages[59], 34, abilityLineY + abilityLines[i] / 2 - 38, 82, 62)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 24)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 19)
} else {
card.drawImage(manaSymbolImages[60], 34, abilityLineY + abilityLines[i] / 2 - 28, 82, 56)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 21)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 16)
}
card.font = "37px mplantin"
card.fillStyle = "black"
card.fillText(":", 124, abilityLineY + abilityLines[i] / 2 - 28)
card.fillText(":", 124, abilityLineY + abilityLines[i] / 2 - 23)
}
abilityLineY += abilityLines[i]
}

View File

@@ -14,7 +14,7 @@ document.getElementById("inputCreatureColor").value = "#ffffff"
var titleFont = "40px belerenb" //40
var titleFontSpacing = "-0.1px" //-0.1
var titleX = 62 //62
var titleY = 42 //42
var titleY = 48 //42
//Mana Cost
var manaCostRadius = 17.5 //17.5
var manaCostX = 657 //657
@@ -23,21 +23,21 @@ var manaCostY = 46 //46
var typeFont = "33.5px belerenb" //33.5
var typeFontSpacing = "0.05px" //0.05
var typeX = 62 //62
var typeY = 526 //596
var typeY = 532 //532
//Rules/Flavor Text
var textFont = "px mplantin"
var textFontSpacing = -0.4 //-0.4
var textX = 134 //134
var textY = 580 //650
var textY = 586 //586
var textWidth = 682 //682
//Power Toughness
var ptFont = "39px belerenb" //39
var ptFontSpacing = "0.3px" //0.3
var ptTextX = 655 //655
var ptTextY = 935 //935
var ptTextY = 940 //940
imgBorderCreature.imgValues(598, 920, 118, 75)
//Bottom Info
var infoY = 993 //993
var infoY = 999 //999
//Set Symbol
var setSymbolY = 545 //615
var setSymbolRight = 695 //695
@@ -76,17 +76,17 @@ function planeswalkerTallCustomFunction() {
card.font = "31px belerenbsc"
if (loyaltyValue.charAt(0) == "-") {
card.drawImage(manaSymbolImages[58], 34, abilityLineY + abilityLines[i] / 2 - 28, 84, 64)
card.fillText(loyaltyValue, 76, abilityLineY + abilityLines[i] / 2 - 22)
card.fillText(loyaltyValue, 76, abilityLineY + abilityLines[i] / 2 - 17)
} else if (loyaltyValue.charAt(0) == "+") {
card.drawImage(manaSymbolImages[59], 34, abilityLineY + abilityLines[i] / 2 - 38, 82, 62)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 24)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 19)
} else {
card.drawImage(manaSymbolImages[60], 34, abilityLineY + abilityLines[i] / 2 - 28, 82, 56)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 21)
card.fillText(loyaltyValue, 74, abilityLineY + abilityLines[i] / 2 - 16)
}
card.font = "37px mplantin"
card.fillStyle = "black"
card.fillText(":", 124, abilityLineY + abilityLines[i] / 2 - 28)
card.fillText(":", 124, abilityLineY + abilityLines[i] / 2 - 23)
}
abilityLineY += abilityLines[i]
}

View File

@@ -12,7 +12,7 @@ document.getElementById("inputTitleColor").value = "#ffe886"
var titleFont = "40px belerenbsc" //40
var titleFontSpacing = "0.15px" //0.15
var titleX = 374.5 //62
var titleY = 56 //56
var titleY = 62 //62
var titleAlign = "center"
//Mana Cost
var manaCostRadius = 17.5 //17.5
@@ -22,21 +22,21 @@ var manaCostY = 59 //59
var typeFont = "33.5px belerenb" //33.5
var typeFontSpacing = "0.05px" //0.05
var typeX = 60 //62
var typeY = 595 //595
var typeY = 601 //601
// Rules/Flavor Text
var textFont = "px mplantin"
var textFontSpacing = 0.7 //0.7
var textX = 66 //66
var textY = 773 //656
var textY = 779 //779
var textWidth = 687 //682
//Power Toughness
var ptFont = "39px belerenb" //39
var ptFontSpacing = "0.3px" //0.3
var ptTextX = 645 //645
var ptTextY = 933 //936
var ptTextY = 939 //939
imgBorderCreature.imgValues(571, 926, 137, 75)
//Bottom Info
var infoY = 993 //993
var infoY = 999 //999
//Set Symbol
var setSymbolY = 616 //616
var setSymbolRight = 693 //693

View File

@@ -15,7 +15,7 @@ document.getElementById("inputTitleColor").value = "#ffe886"
var titleFont = "40px belerenbsc" //40
var titleFontSpacing = "0.15px" //0.15
var titleX = 374.5 //62
var titleY = 56 //56
var titleY = 62 //62
var titleAlign = "center"
//Mana Cost
var manaCostRadius = 17.5 //17.5
@@ -25,21 +25,21 @@ var manaCostY = 59 //59
var typeFont = "33.5px belerenb" //33.5
var typeFontSpacing = "0.05px" //0.05
var typeX = 60 //62
var typeY = 713 //595
var typeY = 719 //719
// Rules/Flavor Text
var textFont = "px mplantin"
var textFontSpacing = 0.7 //0.7
var textX = 66 //66
var textY = 773 //656
var textY = 779 //779
var textWidth = 682 //682
//Power Toughness
var ptFont = "39px belerenb" //39
var ptFontSpacing = "0.3px" //0.3
var ptTextX = 645 //645
var ptTextY = 933 //936
var ptTextY = 939 //939
imgBorderCreature.imgValues(571, 926, 137, 75)
//Bottom Info
var infoY = 993 //993
var infoY = 999 //999
//Set Symbol
var setSymbolY = 734 //616
var setSymbolRight = 693 //693

View File

@@ -12,7 +12,7 @@ document.getElementById("inputTitleColor").value = "#ffe886"
var titleFont = "40px belerenbsc" //40
var titleFontSpacing = "0.15px" //0.15
var titleX = 374.5 //62
var titleY = 56 //56
var titleY = 59 //59
var titleAlign = "center"
//Mana Cost
var manaCostRadius = 17.5 //17.5
@@ -21,22 +21,22 @@ var manaCostY = 59 //59
//Card Type
var typeFont = "33.5px belerenb" //33.5
var typeFontSpacing = "0.05px" //0.05
var typeX = 60 //62
var typeY = 862 //595
var typeX = 60 //60
var typeY = 868 //868
// Rules/Flavor Text
var textFont = "px mplantin"
var textFontSpacing = 0.7 //0.7
var textX = 66 //66
var textY = 260 //656
var textY = 266 //656
var textWidth = 682 //682
//Power Toughness
var ptFont = "39px belerenb" //39
var ptFontSpacing = "0.3px" //0.3
var ptTextX = 645 //645
var ptTextY = 933 //936
var ptTextY = 939 //939
imgBorderCreature.imgValues(571, 926, 137, 75)
//Bottom Info
var infoY = 993 //993
var infoY = 999 //999
//Set Symbol
var setSymbolY = 883 //616
var setSymbolRight = 693 //693

View File

@@ -21,7 +21,7 @@ var manaCostY = 59 //59
var typeFont = "33.5px matrix" //33.5
var typeFontSpacing = "0.05px" //0.05
var typeX = cardWidth / 2
var typeY = 612 //595
var typeY = 612 //612
typeAlign = "center"
//Rules/Flavor Text
var textFont = "px mplantin"
@@ -41,7 +41,7 @@ var ptTextX = 645 //645
var ptTextY = 936 //936
imgBorderCreature.imgValues(571, 929, 137, 75)
//Bottom Info
var infoY = 930 //993
var infoY = 930 //930
//Set Symbol
var setSymbolY = cardHeight * 2 //616
var setSymbolRight = 693 //693

View File

@@ -16,7 +16,6 @@ var imagesToLoad
//Set up canvas
var canvas = document.getElementById("canvas")
var card = canvas.getContext("2d")
card.textBaseLine = "alphabetical"
//Create the canvas for creating the border image
var borderCanvas = document.createElement("canvas")