(P5js) Trying to combine two sketches to each other but keep failing

I'm trying to make a final sketch which final goal is basically to have an input box, submitting a word in it, and getting the spelling of the word, letter by letter. I have both sketches made, the input box one, and the spelling one, but I have tried multiple times and I can't seem to combine both sketches. For all it's worth here's the code.

let input, button, visualization;
var img;

function setup() {
  // create canvas
  createCanvas(600 , 600);
  

  input = createInput();
  input.position(20, 65);

  button = createButton('submit');
  button.position(input.x + input.width, 65);
  button.mousePressed(visualize);

  visualization = createElement('h2', 'Type a word to get its spelling');
  visualization.position(20, 5);

  textAlign(CENTER);
  textSize(50);
}

function visualize() {
  const word = input.value();
  visualization.html('This is the spelling of ' + word + '!');
  input.value('');
}

for the input box.

var sourceText = 'word';
var curIndex = 0;
function setup() {
  createCanvas(400, 400);
  frameRate(3);
}
function draw() {
  background(50);
  fill(255);
  textSize(144);
  textAlign(CENTER, CENTER);
  text(
    sourceText.substring(curIndex, curIndex+1),
    width/2, height/2);
  curIndex++;
  if (curIndex > sourceText.length) {
    curIndex = 0;
  }
}

For the spelling visualization.

Solution

Instead of using two canvases, it might be a good idea to create graphics buffers! The code below will creates only one canvas with two buffers of width = canvas_width and height = canvas_height/2! These buffurs are drawn as image objects!

Also please notice that in the setup function I use noLoop which prevents the draw() function to be executed 60 times per second. By using noLoop() the draw() function will be executed only once! Is good practice to use the noLoop() function when you are working with static canvases. In your case you wanted the input to be inside of the canvas, therefore you must use this to prevent reload on the canvas and allow the system to capture your input.

The rectangle with the button stop loop is for testing purposes only! You may remove it, or experiment and understand how it works! Remember the draw() function is called only once, therefore when the program is executed the rectangle has a random color.

Now, the visualize() function uses the loop() function which enables the draw() function to be executed on 60FPS by default! This is required because you want to update the canvas once a new letter is added! You may choose your own algorithm to implement this but that the main idea of how to solve your problem! This function will use setInterval() & clearInterval() and it's controlled by milliseconds which are defined at the top of the code!

PS:

Consider large text when you implement this because it will go off the canvas. You can check if text position is larger than canvas_width and prevent this from happening (i.e. Reset text position to new line)
Consider invalid input
Consider that a space character is not added in the display text. You may use \s to solve this.
...and more

var topBuffer;
var botttomBuffer;
let input;
let displayDiv;
var secondsPerLetter = 1 * 1000; //1 second * 1000 milliseconds

function setup() {
  noLoop(); //FPS = 0 (draw function is used once only after setup())
  textAlign(CENTER);
  textSize(50);
  
  // create canvas and buffers
  const canvas = createCanvas(800 , 600);
  topBuffer = createGraphics(width, height/2);
  botttomBuffer = createGraphics(width, height/2);
  
  // Draw on your buffers however you like
  drawTopBuffer();
  drawBottomBuffer();
  
  // Paint the off-screen buffers onto the main canvas
  image(topBuffer, 0, 0);
  image(botttomBuffer, 0, 300);
  
}


function draw(){
  fill(random(255),random(255),random(255))
  rect(width-100,height/2-100,100,100)
}

function drawTopBuffer() {
    topBuffer.background(200);
    topBuffer.fill(0);
    topBuffer.textSize(32);
    topBuffer.text("Input a word to be spelled:", 50, 50);
  
    input = createInput();
    input.position(20, height/4-60);
    input.style("width","740px");
    input.style("height","40px");
    input.style("font-size","40px");
  

    var button = createButton('submit');
    button.position(20, 145);
    button.style("width","750px");
    button.style("height","40px");
    button.style("font-size","30px");
  
    button.mousePressed(visualize);
  
    var button2 = createButton('Stop loop()');
    button2.position(width-90, 240);
    button2.mousePressed(noLoop);
}

function drawBottomBuffer() {
    botttomBuffer.background(160);
    botttomBuffer.fill(0);
    botttomBuffer.textSize(32);
  
    botttomBuffer.text("Spelling word:", 50, 50);
    
  
    displayDiv = createElement("div");
    displayDiv.id = "myDisplayDiv";
    displayDiv.position(20, height/2+100);
    displayDiv.style("width", "10px");
    displayDiv.style("height","500px");
    displayDiv.style("font-size","40px");
    displayDiv.style("display","inline-flex");
}

function visualize() {
  
  loop();
  var infoLabel = createElement('h2', 'You typed: \"' + input.value() + '\"');
  infoLabel.position(20, 205);
  
  let str = input.value().split('');
  
  const interval = setInterval(() => {
        
    var p = createElement("p", str[0] + " ");
    
    p.parent(displayDiv);
    
    str = str.slice(1); //Move to next letter

    if (!str.length) {
      clearInterval(interval);
      noLoop(); //STOP LOOP
    }
  }, secondsPerLetter);
}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>