P5.js the text box tool

Hello,
I hope everyone is doing well.

How do I create a textbox using P5.js?
The text box is being drawn underneath the canvas, I want it to be drawn on the canvas.

Please check the video below
https://www.awesomescreenshot.com/video/10163080?key=d97061889e0b9e91e8ef64154a70cc55
Thank you

function textBox(text){
  this.name = "textBox";
  this.icon = "assets/textBox.png";
   
  var s = 100,
    ex = 10,
    txt,
    i;
   
  text.setup = function () {
    text.createCanvas(1500,500); 
    text.background(200);
    txt = [];
  };
   
  text.draw = function () {
    text.background(200);
    console.log();
    text.textRegion(300, text.height / 2 - ex, s + ex, ex, txt, s);
  };
   
  text.textRegion = function (r1, r2, r4, stroke, _text, _size) {
    var r3 = text.textWidth(text.join(_text, "")) + ex;
    text.strokeWeight(stroke);
    text.fill(255);
    text.rect(r1, r2, r3, r4);
    text.fill(0);
    text.textSize(_size);
    text.text(text.join(_text, ""), r1 + stroke, r2 + _size);
    text.noFill();
    text.rect(r1, r2, r3, r4);
  };
   
  text.keyPressed = function () {
    i = txt.length;
    txt[i] = text.key.toLowerCase();
    if (txt.length > (text.width - ex * 2) / s) {
      txt.splice(0, 1);
    }
  };



}

var text = new p5(textBox);