You need to put it into a <div> and then position the <div>.
<input id="mapInput" type="number"/>
And then you style the <div>:
height: 30px; width: 200px;
border: solid black 1px;
Then, to make it appear, you will do something like:
function showPopinput( )
var div = document.getElementById("popinput");
div.style.top = ...see comments...
div.style.left = ...
div.style.display = "block";
// and you'll probably do something like this:
var val = this.value;
... do something with that value ...
document.getElementById("popinput").style.display = "none";
How do you position the <div> where you want it, over the canvas?
If you know the position of the canvas on the page, it's easy: Just add the x/y offsets to the canvas top/left and use those with div.style.top = ( canvastop + 100) + "px";
and ditto for left.
But if you don't know the position of the canvas, you'll need some code to find it.
Show me your HTML for the canvas and I can show you how to find it.