roll20 draws text between frames

creator/index.php

@@ -192,8 +192,10 @@ include('../globalHTML/header-1.php');
 								<h5 class='margin-top'>Text Codes:</h5>
 								<div class='text-codes margin-bottom padding'>
 									<h5>Code</h5><h5>Result</h5>
-									<h5>{i}</h5><h5>Italicizes</h5>
+									<h5>{i}</h5><h5>Italicizes text</h5>
 									<h5>{/i}</h5><h5>Removes italicization</h5>
+									<h5>{bold}</h5><h5>Bolds text</h5>
+									<h5>{/bold}</h5><h5>Removes bold</h5>
 									<h5>{lns}</h5><h5>Moves to the next line without an extra space (stands for line-no-space)</h5>
 									<h5>{flavor}</h5><h5>Moves to the next line, draws the flavor text bar, and italicizes</h5>
 									<h5>{fontsize#}</h5><h5>Changes the font size by # pixels (relative - use negative integers to shrink text - ie '{fontsize-12}')</h5>

js/creator-22.js

@@ -62,6 +62,8 @@ var lastMaskClick = null;
 var scryfallArt;
 var scryfallCard;
 //for text
+var drawTextBetweenFrames = false;
+var redrawFrames = false;
 var savedTextXPosition = 0;
 var savedRollYPosition = null;
 var savedFont = null;
@@ -286,8 +288,15 @@ function findManaSymbolIndex(string) {
 function drawFrames() {
 	frameContext.clearRect(0, 0, frameCanvas.width, frameCanvas.height);
 	var frameToDraw = card.frames.slice().reverse();
+	var haveDrawnPrePTCanvas = false;
 	frameToDraw.forEach(item => {
 		if (item.image) {
+			if (!haveDrawnPrePTCanvas && drawTextBetweenFrames && item.name.includes('Power/Toughness')) {
+				haveDrawnPrePTCanvas = true;
+				frameContext.globalCompositeOperation = 'source-over';
+				frameContext.globalAlpha = 1;
+				frameContext.drawImage(textCanvas, 0, 0, frameCanvas.width, frameCanvas.height);
+			}
 			frameContext.globalCompositeOperation = item.mode || 'source-over';
 			frameContext.globalAlpha = item.opacity / 100 || 1;
 			if (item.opacity == 0) {
@@ -320,6 +329,12 @@ function drawFrames() {
 			}
 		}
 	});
+	if (!haveDrawnPrePTCanvas && drawTextBetweenFrames) {
+		haveDrawnPrePTCanvas = true;
+		frameContext.globalCompositeOperation = 'source-over';
+		frameContext.globalAlpha = 1;
+		frameContext.drawImage(textCanvas, 0, 0, frameCanvas.width, frameCanvas.height);
+	}
 	drawCard();
 }
 function loadFramePacks(framePackOptions = []) {
@@ -665,12 +680,20 @@ function drawTextBuffer() {
 }
 async function drawText() {
 	textContext.clearRect(0, 0, textCanvas.width, textCanvas.height);
+	drawTextBetweenFrames = false;
 	for (var textObject of Object.entries(card.text)) {
 		await writeText(textObject[1], textContext);
 		continue;
 	}
+	if (drawTextBetweenFrames || redrawFrames) {
+		drawFrames();
+		if (!drawTextBetweenFrames) {
+			redrawFrames = false;
+		}
+	} else {
 		drawCard();
 	}
+}
 function writeText(textObject, targetContext) {
 	//Most bits of info about text loaded, with defaults when needed
 	var textX = scaleX(textObject.x) || scaleX(0);
@@ -813,15 +836,21 @@ function writeText(textObject, targetContext) {
 				} else if (possibleCode == 'i') {
 					if (textFont == 'mplantin') {
 						textFontExtension = 'i';
-						textFontStyle = '';
+						textFontStyle = textFontStyle.replace('italic ', '');
 					} else {
 						textFontExtension = '';
-						textFontStyle = 'italic ';
+						if (!textFontStyle.includes('italic')) {textFontStyle += 'italic ';}
 					}
 					lineContext.font = textFontStyle + textSize + 'px ' + textFont + textFontExtension;
 				} else if (possibleCode == '/i') {
 					textFontExtension = '';
-					textFontStyle = '';
+					textFontStyle = textFontStyle.replace('italic ', '');
+					lineContext.font = textFontStyle + textSize + 'px ' + textFont + textFontExtension;
+				} else if (possibleCode == 'bold') {
+					if (!textFontStyle.includes('bold')) {textFontStyle += 'bold ';}
+					lineContext.font = textFontStyle + textSize + 'px ' + textFont + textFontExtension;
+				} else if (possibleCode == '/bold') {
+					textFontStyle = textFontStyle.replace('bold ', '');
 					lineContext.font = textFontStyle + textSize + 'px ' + textFont + textFontExtension;
 				} else if (possibleCode == 'left') {
 					textAlign = 'left';
@@ -900,6 +929,8 @@ function writeText(textObject, targetContext) {
 						ptShift[1] = scaleHeight(parseFloat(possibleCode.split(',')[1]));
 					}
 				} else if (possibleCode.includes('roll')) {
+					drawTextBetweenFrames = true;
+					redrawFrames = true;
 					if (savedRollYPosition == null) {
 						savedRollYPosition = currentY;
 					} else {
@@ -1441,7 +1472,7 @@ function drawCard() {
 	} else if (card.version.includes('dungeon') && typeof dungeonCanvas !== "undefined") {
 		cardContext.drawImage(dungeonCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
 	}
-	cardContext.drawImage(textCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
+	if (!drawTextBetweenFrames) {cardContext.drawImage(textCanvas, 0, 0, cardCanvas.width, cardCanvas.height);}
 	cardContext.drawImage(setSymbol, scaleX(card.setSymbolX), scaleY(card.setSymbolY), setSymbol.width * card.setSymbolZoom, setSymbol.height * card.setSymbolZoom)
 	cardContext.drawImage(bottomInfoCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
 	// guidelines