I decided to try and package up the complicated GUI functions in FCR into a neat little bundle that feels like a mix of p5.js drawing functions and CSS/HTML styling. I decided to make the GUI elements into a component-based system so that they are easily expandable and mixable. For now, I have simple boxes, text boxes, images, and input text boxes, but I plan on adding more stuff at a later point. I will also add scrollable containers at some point.
Demo: https://studio.code.org/projects/gamelab/rOXQsmd4_OVOOWKzsdPAQegNHSwSzXd-St4PMW3aaNg/view
Version 1.0
var elementList = [];
var interactiveList = [];
var activeInput = false;

var defaultStyle = {
  padx:5,
  pady:5,
  fill:128,
  stroke:0,
  strokeWeight:1,
  textFill:0,
  textStroke:false,
  textStrokeWeight:1,
  textSize:12,
  horizAlign:"left",
  vertAlign:"top",
  textmax:true,
  font:"heveltica",
  bevel:0,
  imageFit:"none",
  imageHorizAlign:"center",
  imageVertAlign:"center",
  cursor:0,
  get:function(e) {
    return defaultStyle[e];
  }
};
function createStyle(parent) {
  var obj = {};
  obj.parent = parent || defaultStyle;
  obj.get = function(e) {
    if (obj[e] === undefined) return obj.parent.get(e);
    return obj[e];
  }
  obj.use = function() {
    if (obj.get("fill") === false) noFill();
    else fill(obj.get("fill"));
    if (obj.get("stroke") === false) noStroke();
    else stroke(obj.get("stroke"));
    strokeWeight(obj.get("strokeWeight"));
  };
  obj.usetext = function() {
    if (obj.get("textFill") === false) noFill();
    else fill(obj.get("textFill"));
    if (obj.get("textStroke") === false) noStroke();
    else stroke(obj.get("textStroke"));
    strokeWeight(obj.get("textStrokeWeight"));
    textAlign(obj.get("horizAlign"),obj.get("vertAlign"));
    textSize(obj.get("textSize"));
    textFont(obj.get("font"));
  };
  return obj;
}

function createElement(x,y,w,h) {
  var obj = {};
  obj.x = x || 0;
  obj.y = y || 0;
  obj.width = w === undefined ? 50 : w;
  obj.height = h === undefined ? 50 : h;
  obj.style = createStyle();
  obj.visible = true;
  obj._cache = {};
  obj.testhover = function() {
    return mouseRect(obj.x,obj.y,obj.width,obj.height);
  };
  obj.box = function(s) {
    s.use();
    rect(obj.x,obj.y,obj.width,obj.height,s.get("bevel"));
  };
  obj.draw = function() {
    var s = obj.style;
    if (obj.hover) {
      if (mouseDown("left")) s = obj.clickStyle;
      else s = obj.hoverStyle;
    }
    if (activeInput == obj) s = obj.activeStyle;
    obj.box(s);
    if (obj.image) obj.image(s);
    if (obj.text) obj.text(s);
    if (obj.cursor) obj.cursor(s);
  };
  obj.addComponent = function(e,a,b,c) {
    Components[e](obj,a,b,c);
  };
  elementList.push(obj);
  return obj;
}
var Components = {};
Components.text = function(obj,txt) {
  obj.value = txt||"";
  obj.text = function(s) {
    s.usetext();
    var max, tx = s.get("padx"), ty = s.get("pady");
    var ax = s.get("horizAlign");
    var ay = s.get("vertAlign");
    var tm = s.get("textmax");
    if (tm) {
      max = obj.width - tx;
      if (ax == "center" && !obj.cursor) max = obj.width - tx * 2;
    } else {
      if (ax == "right" && !obj.cursor) tx = obj.width - tx;
      else if (ax == "center" && !obj.cursor) tx = obj.width/2;
    }
    if (ay == "bottom" && !obj.cursor) ty = obj.height - ty;
    else if (ay == "center" && !obj.cursor) ty = obj.height/2;
    if (tm == 'number') max = tm;
    obj._cache.max = max;
    obj._cache.tx = tx;
    obj._cache.ty = ty;
    text(obj.value,obj.x+tx,obj.y+ty,max);
  };
}
Components.button = function(obj,txt) {
  Components.text(obj,txt);
  obj.hoverStyle = createStyle(obj.style);
  obj.clickStyle = createStyle(obj.hoverStyle);
  obj.hover = false;
  obj.onclick = function(){};
  interactiveList.push(obj);
};
Components.image = function(obj,url,callback,failure) {
  if (typeof url == 'string') obj.img = loadImage(url,function(img) {
    if (obj.width === 0) obj.width = img.width;
    if (obj.height === 0) obj.height = img.height;
  },failure);
  else obj.img = url;
  obj.image = function(s) {
    var f = s.get("imageFit");
    var ax = s.get("imageHorizAlign");
    var ay = s.get("imageVertAlign");
    if (f == "inside") {
      var bb = centerRect(obj.width,obj.height,obj.img.width,obj.img.height);
      if (ax == "left") bb.x = 0;
      if (ax == "right") bb.x = obj.width-bb.w;
      if (ay == "top") bb.y = 0;
      if (ay == "bottom") bb.y = obj.height-bb.h;
      image(obj.img,obj.x+bb.x,obj.y+bb.y,bb.w,bb.h);
    }
    else if (f == "outside") {
      var bb = centerRect(obj.img.width,obj.img.height,obj.width,obj.height);
      if (ax == "left") bb.x = 0;
      if (ax == "right") bb.x = obj.img.width-bb.w;
      if (ay == "top") bb.y = 0;
      if (ay == "bottom") bb.y = obj.img.height-bb.h;
      image(obj.img,bb.x,bb.y,bb.w,bb.h,obj.x,obj.y,obj.width,obj.height);
    }
    else image(obj.img,obj.x,obj.y,obj.width,obj.height);
  };
};
Components.input = function(obj,txt) {
  Components.text(obj,txt);
  Components.button(obj);
  obj.activeStyle = createStyle(obj.clickStyle);
  obj.cursorPos = obj.value.length;
  obj.cursor = function(s) {
    if (frameCount % 30 < 15 && activeInput == obj) return;
    noStroke();
    fill(s.get("cursor"));
    text("|",obj.x+obj._cache.cursorX,obj.y+obj._cache.cursorY+0.5);
  };
  obj.calculateCursorPos = function() {
    var s = obj.style, c = obj._cache;
    c.cursorY = (obj.beflines.length-1)*(s.get("textSize")+2.5)+c.ty;
    c.cursorX = textWidth(obj.beflines[obj.beflines.length-1])+c.tx;
  };
  obj.onclick = function() {
    var s = obj.style, c = obj._cache;
    activeInput = obj;
    var lines = getLines(obj.value,c.max);
    var dx = mouseX - obj.x - c.tx;
    var dy = mouseY - obj.y - c.ty;
    var li = constrain(round(dy/(s.get("textSize")-1)),0,lines.length)-1;
    var e = textWidth("_");
    var last = lines[li]||"";
    var cpos = min(round(dx/e),last.length);
    while (textWidth(last.substring(0,cpos))>dx) cpos--;
    while (textWidth(last.substring(0,cpos))<dx && cpos < last.length) cpos++;
    for (var i = 0; i < li; i++) {
      cpos += lines[i].length;
    }
    cpos += (obj.value.substring(0,cpos).match(/\n/g)||[]).length;
    obj.cursorPos = cpos;
    obj.update();
  };
  obj.update = function() {
    var str = obj.value.substring(0,obj.cursorPos);
    obj.beflines = getLines(str,obj._cache.max);
    obj.lines = getLines(obj.value,obj._cache.max);
    obj.calculateCursorPos();
    obj.onchange();
  }
  obj.onchange = function() {};
  setTimeout(function(){
    obj.text(obj.style);
    obj.update();
  },0);
};

function drawElements() {
  cursor(ARROW);
  var done = false;
  for (var i = interactiveList.length-1; i >= 0; i--) {
    var obj = interactiveList[i];
    if (!obj.visible) continue;
    var h = !done && obj.testhover();
    obj.hover = h;
    if (obj.hover && obj.onclick) {
      if (obj.cursor) cursor(TEXT);
      else cursor(HAND);
    }
    if (h) done = true;
  }
  for (var i = 0; i < elementList.length; i++) {
    if (!elementList[i].visible) continue;
    elementList[i].draw();
  }
}
function mousePressedElements() {
  activeInput = false;
  var done = false;
  for (var i = interactiveList.length-1; i >= 0; i--) {
    if (!interactiveList[i].visible) continue;
    var h = !done && interactiveList[i].testhover();
    if (h) {
      interactiveList[i].onclick();
      done = true;
    }
  }
}
function keyTypedElements() {
  if (!activeInput) return;
  if (key == "\r") return;
  var oldkey = key;
  onHold(keyCode,key,function(){
    activeInput.value = activeInput.value.substring(0, activeInput.cursorPos) + oldkey + activeInput.value.substring(activeInput.cursorPos, activeInput.value.length);
    activeInput.cursorPos++;
    activeInput.update();
  });
}
function keyPressedElements() {
  if (!activeInput) return;
  onHold(BACKSPACE,"backspace",function() {
    activeInput.value = activeInput.value.substring(0, activeInput.cursorPos-1) + activeInput.value.substring(activeInput.cursorPos, activeInput.value.length);
    activeInput.cursorPos--;
    activeInput.cursorPos = max(0,activeInput.cursorPos);
    activeInput.update();
  });
  onHold(LEFT_ARROW,"left",function() {
    activeInput.cursorPos = max(activeInput.cursorPos-1,0);
    activeInput.update();
  });
  onHold(RIGHT_ARROW,"right",function() {
    activeInput.cursorPos = min(activeInput.cursorPos+1,activeInput.value.length);
    activeInput.update();
  });
  if (keyCode == ENTER) {
    activeInput.value = activeInput.value.substring(0, activeInput.cursorPos) + "\n" + activeInput.value.substring(activeInput.cursorPos, activeInput.value.length);
    activeInput.cursorPos++;
    activeInput.update();
    return;
  }
  var lines, cursorLine, cursorOffset;
  var updateLines = function() {
    activeInput.update();
    lines = activeInput.lines;
    cursorLine = activeInput.beflines.length-1;
    cursorOffset = activeInput.cursorPos;
    for (var i = 0; i < cursorLine; i++) {
      cursorOffset -= lines[i].length+1;
    }
  }
  onHold(UP_ARROW,"up",function() {
    updateLines();
    if (cursorLine <= 0) return;
    var newPos = 0;
    for (var i = 0; i < cursorLine-1; i++) {
      newPos += lines[i].length+1;
    }
    activeInput.cursorPos = newPos + min(cursorOffset,lines[cursorLine-1].length);
  });
  onHold(DOWN_ARROW,"down",function() {
    updateLines();
    if (cursorLine >= lines.length-1) return;
    var newPos = 0;
    for (var i = 0; i < cursorLine+1; i++) {
      newPos += lines[i].length+1;
    }
    activeInput.cursorPos = newPos + min(cursorOffset,lines[cursorLine+1].length);
  });
  if (keyCode == 86 && keyDown(CONTROL)) {
    var pasted = prompt("Paste here:");
    if (!pasted) return;
    activeInput.value = activeInput.value.substring(0,activeInput.cursorPos) + pasted + activeInput.value.substring(activeInput.cursorPos,activeInput.value.length);
    activeInput.cursorPos += pasted.length;
    activeInput.update();
  }
}
function mousePressed() {
  mousePressedElements();
}
function keyTyped() {
  keyTypedElements();
}
function keyPressed() {
  keyPressedElements();
}

function mouseRect(x,y,width,height) {
  return (
    mouseX > x &&
    mouseX < x+width &&
    mouseY > y && 
    mouseY < y+height
  );
}
function centerRect(w1,h1,w2,h2) {
  var fatness1 = w1 / h1;
  var fatness2 = w2 / h2;

  var scale;
  if (fatness2 >= fatness1) scale = w1 / w2;
  else scale = h1 / h2;
  var w = w2 * scale;
  var h = h2 * scale;

  var xCenter = 0 + (w1 / 2);
  var yCenter = 0 + (h1 / 2);

  var x = xCenter - (w / 2);
  var y = yCenter - (h / 2);

  return { x:x, y:y, w:w, h:h };
}
function getLines(string,width) {
  if (typeof string != 'string') return [];
  var lines = string.split("\n");
  for (var i = 0; i < lines.length; i++) {
    if (textWidth(lines[i]) <= width) continue;
    var off = "";
    while (textWidth(lines[i]) > width || (!lines[i].match(/[\s-_]$/) && lines[i].match(/[\s-_]/))) {
      off = lines[i].charAt(lines[i].length-1)+off;
      lines[i] = lines[i].substr(0,lines[i].length-1);
    }
    lines.splice(i+1,0,off);
  }
  return lines;
}
function onHold(kc,k,funct) {
  if (keyCode != kc && key != k) return;
  funct();
  setTimeout(function() {
    if (!keyDown(k)) return;
    funct();
    var int = setInterval(function() {
      if (!keyDown(k)) {
        clearInterval(int);
        return;
      }
      funct();
    },100);
  },600);
}

// Main

var test = createElement(10,10,50,50);
test.addComponent("button","this is a test of the text");
test.style.fill = "red";
test.hoverStyle.fill = "pink";
test.clickStyle.fill = "white";
test.style.bevel = 5;
test.onclick = function() {
  console.log(1);
};

var test = createElement(20,20,60,50);
test.addComponent("button","wow! it's a test of the text");
test.style.fill = "blue";
test.hoverStyle.fill = "cyan";
test.clickStyle.fill = "white";
test.style.bevel = 5;
test.style.stroke = "blue";
test.onclick = function() {
  console.log(2);
};

var test = createElement(50,100,300,200);
test.addComponent("image","https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg");
test.addComponent("text","wow!");
test.style.imageFit = "inside";
test.style.textFill = "white";
test.style.horizAlign = "center";
test.style.vertAlign = "center";

var test = createElement(20,310,360,80);
test.addComponent("input","Wow!\nWhat a so very nice day to spend lots of time with friends and family.\n Tons of cheer and spirit to go round. Oh yes, it is that time of year again. Christmas bells ring in the distance.");
test.onchange = function() {console.log(key)};
test.activeStyle.stroke = "white";
test.hoverStyle.stroke = "grey";

var test = createElement(70,10,100,40);
test.addComponent("input","Other Text Box");
test.style.fill = "green";
test.hoverStyle.fill = "lime";
test.style.bevel = 5;
test.style.stroke = "white";

function draw() {
  background(220);
  drawElements();
}
If you have any suggestions, or you find any bugs, please comment them below. Also, upvote this post if you found it useful.