Add textfield to canvas HTML5

Question

I am creating a browser game with JavaScript and I want for the user to type his nickname before the game starts. How it is possible to add a textfield to the canvas? I tried with an overlay to the canvas. But I can not remove it with javascript.

Thank you in advande for your advices.

Answer 1

Ok guys I found a solution for my question. I am using the createjs framework that offers me the possibility to create DOM Elemets and place them on the canvas. So I have done it like this:

        var domElement = new createjs.DOMElement(document.getElementById('nickname'));
        domElement.x = 650;
        domElement.y = - domElement.height;
        this.stage.addChild(domElement);

My HTML code is this:

<div id="canvas_wrap">
<form id="myForm" style="visibility: hidden">
    <input id="nickname" value="Your nickname!" size="10">
</form>

<canvas id="display" width="1280" height="800"></canvas>
<!--<div id="overlay" style="color:#ff3f3a;width: 1280px;height: 800px; visibility:hidden">  -->
<div id="overlay" style="color:#ff3f3a;">