The HTML <textarea> allows the user to enter input feedback in your HTML. I wanted to display a <textarea> over the Canvas in my Adobe Animate CC HTML5-Canvas project because <textarea> is multiline whereas <input> is not. Below is the result of my attempt.

Here is my code

I place this code in the actions panel for the frame I’m working on.

window.mainTL = this;

//using the <textarea> in JavaScript with no jQuery
/*I used JavaScript here because I don’t have to add another js-library to
the Include of the Global Panel.*/

var animContainer = document.getElementById(“animation_container”);
var tArea = document.createElement(“textarea”);
animContainer.appendChild(tArea);
tArea.setAttribute(“id”, “userTBox”);

/*Let me take a moment here to explain how I understand the code above.
AnimateCC,ACC, puts a <div> around the <canvas> with the id “animation_container”.
The first line of code accesses this div and assigns it to the variable “animContainer”.
The second line of code creates a new element the <textarea> and assigns it
to the variable “tArea”.
The third line of code attaches the new element to “animContainer”. You don’t have to
attach it to the “animContainer”, but if you choose “responsive” in the publish settings it will apply responsiveness to the textarea as well as the canvas, all the children of the “animation_container”.
This is important because if the user resizes the window or views the animation in a mobile devise the textarea will remain fix and will not jump out of the canvas. So when I wrote the cssText below I assigned percentages instead of fixed numbers to the top, left, width, and height. of the textarea.*/

tArea.style.cssText = `position: absolute;
                                        top:30%;
                                        left:30%;
                                        font-family: ‘Happy Monkey’;
                                        font-size: 26px;
                                        height: 40%;
                                        width: 50%;
                                        color: red;
                                       text-align: left`;
//tArea.value = “Enter your text here. Then click submit.”;
tArea.focus();

mainTL.submitButton.addEventListener(“click”, clkHandler);

function clkHandler(e){
    let userTxt = tArea.value;
//recently the new release of ES6 allows for the use of “let” keyword to declare a variable.
    tArea.value = `Mi amor, your text is:
    ${userTxt}.`
}  //Here I’m using a template string(see comment below)

/*
Note: the cssText, above, is a string where the declarations are expressed in css syntax using the “-” to remove white space between words like font-family instead of fontFamily(Camel Case) used in javascript.

I’m also using ‘template literals’, this is a new syntax adopted in ES6 recently that you can use in place of the “string”. You wrap your string in tic marks(“) (the font I’m using here does not display the tic marks. It displays a single quote in its place. The tic mark key is right next to the 1 key.)instead of quotes(“”,”) and format it the way you like it and it will be displayed that way wyswyg.

One more thing, it is better to use a submit button and use the click event to access the user text than the keyup event for the return key because when the user hits the return key the user automatically generates a new line since the textarea is multiline. You can make your own submit button on the main timeline of the canvas instead of using the html button element <button>. I used a button symbol that belongs to the canvas, not a DOM html element.

References:

In W3 Schools.com search for ‘The HTML DOM Element Object’ or go to ‘https://www.w3schools.com/jsref/dom_obj_all.asp’ to
see a very useful list of methods, properties and events you can use to manipulate the elements that you insert into the web page where your <canvas> resides. As I understand it, the html page that Animate CC generates contains a <div> that contains the <canvas> element. You can see it if you open the yourProject.html in a code editor. (Make sure that you run the project at least once so that the file gets generated). You may see something like this:

<body onload="init();" style="margin:0px;">
  <div id="animation_container" style="background-color:rgba(153, 153, 153, 1.00); width:1200px; height:800px">
     <canvas id="canvas" width="1200" height="800" style="position: absolute; display: block; background-color:rgba(153, 153, 153, 1.00);">
      </canvas>
     <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1200px; height:800px; position: absolute; left: 0px; top: 0px; display: block;">
     </div>
  </div>
</body>

You can create new html elements with the method
document.createElement(“element like p or div”); that then you can append to any of the existing elements using the existingElemnt.appendChild(elementYouCreated) method.