How to use a textbox with html5 canvas (and hide it when not needed)

Question

I am making a html5 game and need to get input from a textbox. I have read that that I should make the textbox outside of the canvas instead of inside it, but I am not sure how I would go about that.

At some points in the game, I need the text box to be hidden. For example hide textbox when in main menu.

Answer 1

To put the textbox outside canvas, just use a HTML input element:

<canvas id = "the-canvas"></canvas>
<input id = "the-textbox" type = "text">

You can retrieve the value typed in the input field using

document.getElementById("the-textbox").value 

And to hide or show the input element, use:

//hide it
document.getElementById("the-textbox").style.display = "none";

//show it
document.getElementById("the-textbox").style.display = "inline"; //or inline-block

You'll find more info on MDN input page