this has been bugging me for a while, I’ve created a pipboy like interface to display the condition of the character and built it into a solo functions but now i want to incorporate it into other display cards. The problem is every time i try to take the content out and put them in an external file the “canvas” or “msg” become undefined. This seems like a no brainer to off load to a function but I’m not sure how. i know i also have to pass “paperDollXoffset, paperDollXoffsetShort, paperDollYoffset, paperDollwidth, paperDollwidthShort”, and “paperDollheight” as their configured for the stand alone canvas and would need adjusting on merged canvases.
code follows
var CanvasW = 625;
var CanvasH = 500;
const paperDollXoffset = 0;
const paperDollXoffsetShort = 187.5;
const paperDollYoffset = 0;
const paperDollwidth = 625;
const paperDollwidthShort = 250;
const paperDollheight = 500;
canvas = Canvas.createCanvas(CanvasW, CanvasH);
context = canvas.getContext('2d');
background = await Canvas.loadImage('./images/photo-1538370965046-79c0d6907d47.jpg');
var useShortValuesArms = 0;
var useShortValuesLegs = 0;
var useShortValuesBody = 0;
var useShortValuesHead = 0;
context.drawImage(background, 0, 0, CanvasW, CanvasH);
context.strokeStyle = '#0099ff';
context.strokeRect(0, 0, CanvasW, CanvasH);
var basePic1URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Base/NekollxComm_BaseV2ArmS1_White.png';
var basePic2URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Base/NekollxComm_BaseV2ArmS2_White.png';
var basePic3URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Base/NekollxComm_BaseV2Head_White.png';
var basePic4URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Base/NekollxComm_BaseV2Torso_White.png';
var basePic5URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Base/NekollxComm_BaseV2LegS1_White.png';
var basePic6URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Base/NekollxComm_BaseV2LegS2_White.png';
var basePic7URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/CatPeople/NekollxComm2_CatTail_F_White.png';
var basePic8URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/DragonPeople/NekollxComm2_DragonWingS1_F_White.png';
var basePic9URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/DragonPeople/NekollxComm2_DragonWingS2_F_White.png';
if (msg.content.toLocaleLowerCase().includes('!tail')){
basePic3URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/CatPeople/NekollxComm2_CatHead_F_White.png';
basePic7URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/CatPeople/NekollxComm2_CatTail_F_White.png';
};//tail default to cat
if (msg.content.toLocaleLowerCase().includes('!wing')){
basePic3URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/DragonPeople/NekollxComm2_DragonHead_F_White.png';
basePic7URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/DragonPeople/NekollxComm2_DragonTail_F_White.png';
basePic8URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/DragonPeople/NekollxComm2_DragonWingS1_F_White.png';
basePic9URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/DragonPeople/NekollxComm2_DragonWingS2_F_White.png';
};//wing default to dragon girl
if (msg.content.toLocaleLowerCase().includes('!noarm')){
basePic3URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/BatPeople/NekollxComm2_BatHead_F_White.png';
basePic7URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/BatPeople/NekollxComm2_BatTail_F_White.png';
basePic8URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/BatPeople/NekollxComm2_BatWingS1_F_White.png';
basePic9URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/BatPeople/NekollxComm2_BatWingS2_F_White.png';
}//noarms and wing default to bat
if (msg.content.toLocaleLowerCase().includes('!noleg')){
basePic1URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/MerPeople/NekollxComm2_MerArmS1_F_White.png';
basePic2URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/MerPeople/NekollxComm2_MerArmS2_F_White.png';
basePic3URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/MerPeople/NekollxComm2_MerHead_F_White.png';
basePic4URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/MerPeople/NekollxComm2_MerTorso_F_White.png';
basePic7URL = 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/MerPeople/NekollxComm2_MerTail_F_White.png';
};//no leg and tail default to mermaid
//add/get art for (tail, no arm, no leg) Serpent [Torso, tail, head]
//add/get art for (tail, arm, no leg, wing) Wyrm [Torso, tail, head, arm, wing]
//add/get art for (tail, no arm, no leg, wing) feathered serpent [Torso, tail, head, wing]
//add/get art for (no arm, optional tail) undertale/monster kid [Torso, tail, head, legs]
//add/get art for (no leg, optional tail) arm monster, tail is a full serpent [Torso, tail, head, arm]
//add/get art for (no leg, no arm, wing, optional tail) arm monster, tail is a full serpent, arms are wings [Torso, tail, head, wing]
if (basePic1URL == 'https://maskedriders.info/Mee6RP/PaperDoll/White_Base/NekollxComm_BaseV2ArmS1_White.png'){
useShortValuesArms = 1;
}
if ((basePic3URL == 'https://maskedriders.info/Mee6RP/PaperDoll/White_Base/NekollxComm_BaseV2Head_White.png') || (basePic3URL == 'https://maskedriders.info/Mee6RP/PaperDoll/White_Adjustments/CatPeople/NekollxComm2_CatHead_F_White.png')){
useShortValuesHead = 1;
}
if (basePic4URL == 'https://maskedriders.info/Mee6RP/PaperDoll/White_Base/NekollxComm_BaseV2Torso_White.png'){
useShortValuesBody = 1;
}
if (basePic5URL == 'https://maskedriders.info/Mee6RP/PaperDoll/White_Base/NekollxComm_BaseV2LegS1_White.png'){
useShortValuesLegs = 1;
}
var conditionpic1 = await Canvas.loadImage(basePic1URL);
var conditionpic2 = await Canvas.loadImage(basePic2URL);
var conditionpic3 = await Canvas.loadImage(basePic3URL);
var conditionpic4 = await Canvas.loadImage(basePic4URL);
var conditionpic5 = await Canvas.loadImage(basePic5URL);
var conditionpic6 = await Canvas.loadImage(basePic6URL);
var conditionpic7 = await Canvas.loadImage(basePic7URL);
var conditionpic8 = await Canvas.loadImage(basePic8URL);
var conditionpic9 = await Canvas.loadImage(basePic9URL);
var variableX = paperDollXoffset;
var variableW = paperDollwidth;
if (!msg.content.toLocaleLowerCase().includes('!noarm')){
if (useShortValuesArms == 1){
variableX = paperDollXoffsetShort;
variableW = paperDollwidthShort;
}
context.drawImage(conditionpic1, variableX, paperDollYoffset, variableW, paperDollheight);
context.drawImage(conditionpic2, variableX, paperDollYoffset, variableW, paperDollheight);
}//noarms
variableX = paperDollXoffset;
variableW = paperDollwidth;
if (useShortValuesHead == 1){
variableX = paperDollXoffsetShort;
variableW = paperDollwidthShort;
}
context.drawImage(conditionpic3, variableX, paperDollYoffset, variableW, paperDollheight);
variableX = paperDollXoffset;
variableW = paperDollwidth;
if (useShortValuesBody == 1){
variableX = paperDollXoffsetShort;
variableW = paperDollwidthShort;
}
context.drawImage(conditionpic4, variableX, paperDollYoffset, variableW, paperDollheight);
variableX = paperDollXoffset;
variableW = paperDollwidth;
if (!msg.content.toLocaleLowerCase().includes('!noleg')){
if (useShortValuesLegs == 1){
variableX = paperDollXoffsetShort;
variableW = paperDollwidthShort;
}
context.drawImage(conditionpic5, variableX, paperDollYoffset, variableW, paperDollheight);
context.drawImage(conditionpic6, variableX, paperDollYoffset, variableW, paperDollheight);
}//nolegs
variableX = paperDollXoffset;
variableW = paperDollwidth;
if (msg.content.toLocaleLowerCase().includes('!wing')){
context.drawImage(conditionpic8, variableX, paperDollYoffset, variableW, paperDollheight);
context.drawImage(conditionpic9, variableX, paperDollYoffset, variableW, paperDollheight);
}//wings
if (msg.content.toLocaleLowerCase().includes('!tail')){
if (useShortValuesHead == 1){
variableX = paperDollXoffsetShort;
variableW = paperDollwidthShort;
}
context.drawImage(conditionpic7, variableX, paperDollYoffset, variableW, paperDollheight);
}//tail