How to: Input text box in Animate CC canvas, version 2

This method will allow you to put input text boxes within a particular location on your canvas, using co-ordinates etc that make sense, that will change if the page is resized.

By the end of it, you should be able to create an input textbox form within your canvas, just by calling a function like this:

createTextBox(250, 76.05, 315.1, 16);//width, xpos, ypos, fontsize

1) Put the canvas in a div, so that you can easily add input boxes just after the canvas.

 <div id='canvasHolder'>
<canvas id="canvas" width="800" height="450" style="display: block; background-color:rgba(0, 0, 0, 1.00)"></canvas>
</div>

2) My canvas is set to resize with the window, under Publish Settings, I chose: Center stage, Both; Make responsive, Both; Scale to fill visible area, Fit in view. So this code works for those settings, but seeing this might help if you are using something different.

So the canvas html contains a function that automatically resizes the canvas, and you will need some of those variables to figure out how big your textbox needs to be. So you need to give them a global scope. In the javascript,

var pRatio, xRatio, yRatio, sRatio;

Also, create an array that will hold all your text boxes so that you can resize them later.

var txtBoxes = new Array();

You also need to go into the resizing function and remove the 'var' so that they are global variables. In the resizeCanvas function, change:

var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;

to

pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;

3) Now here is the function that will create the input text box:

function createTextBox(wid, xpos, ypos, fsize) {
var node = document.createElement("INPUT");
node.type = 'text';
node.style = "position: fixed; font-family:'Gill Sans MT'; border:none; border-bottom-style:solid; border-bottom-width:1px";
txtBoxes.push({'ele':node,'wid':wid,'xpos':xpos,'ypos':ypos,'fsize':fsize});
sizeBox(txtBoxes[txtBoxes.length-1]);
document.getElementById('canvasHolder').appendChild(node);
}

The first line of this function creates an input 'node', the second specifies it as a text input, although this is the default, so not strictly necessary.

Setting the css position to fixed works for me, but some others might work too, this isn't my strong point. Setting the font and border was a personal choice.

It adds an object containing the node and all its sizing properties to the txtBoxes array, so that this info can be used when resizing later.

It calls the sizeBox function with the object - this will position the object appropriately.

Then it adds the node to the canvasHolder element (where the canvas is).

4) Here is the sizeBox function:

function sizeBox(obj) {
var node = obj['ele'];
node.style.width =  Math.round((canvas.width/pRatio)*(obj['wid']/lib.properties.width)) + "px";
node.style.fontSize = Math.round(sRatio*obj['fsize'])+"px";
if(xRatio < yRatio) {
node.style.left = Math.round((canvas.width/pRatio)*(obj['xpos']/lib.properties.width))+"px";
node.style.top = Math.round((0.5*(window.innerHeight-(canvas.height/pRatio)))+((canvas.height/pRatio)*(obj['ypos']/lib.properties.height)))+"px";
}else{
node.style.left = Math.round((0.5*(window.innerWidth - (canvas.width/pRatio))) + ((canvas.width/pRatio) * (obj['xpos']/lib.properties.width))) + "px";
node.style.top = Math.round((canvas.height/pRatio)*(obj['ypos']/lib.properties.height)) + "px";
}
}

The size properties of the canvas is complex and I don't fully understand how it works, but I just kept fiddling around with things until it sort of made sense. Basically, you can set the width relative to the canvas' actual size, same for the font.

Its similar for the x and y position, but one will need to be offset because the ratio of the width and the height may not be equal.

5) Finally, alter the resizeCanvas function so that the textboxes are automatically altered.

After this line:

lastW = iw; lastH = ih; lastS = sRatio;

Add this:

for(i=0; i sizeBox(txtBoxes[i]);
}

It goes through each of the txtBoxes and resizes them, as the window is being resized.

6) Now you can create them from your canvas, like so:

createTextBox(250, 76.05, 315.1, 16);//width, xpos, ypos, fontsize


Just a few notes about this method, the alignment is 100% flawless, I think because everything has to be rounded off to pixels, but it is pretty good.
Also, how to access the value inside? You can't assign them an id, and use document.getElementById, because the node is dynamically added. But you can access the txtBoxes array and get the value of the node.