HTML5: How do you place a fixed Text Input over a centering canvas?

Question

I have a canvas that contains a game. I want to place an html text input field at a specific spot in the game. This is proving difficult since I want the canvas to automatically center horizontally in the window and it desyncs with the text input when the window size changes.

What style settings should I give both elements to make the text field remain in the same place on the canvas?

Answer 1

I found a solution that works: http://jsfiddle.net/FV2NL/

<div id="container">
    <canvas id="canvas" width=800 height=600></canvas>
        <div id="menu">
            <button id="button1" type="button">Start</button>
            <button id="button2" type="button">Options</button>
            <button id="button3" type="button">High Scores</button>
        </div>
</div>
</body>

Everything has to be inside of a div group that has relative positioning and is centered with margin: 0 auto;. The canvas should have absolute positioning and top: 0; left: 0;. The text inputs are absolute and put inside of a relative div.

This is from another StackOverflow page here:

Buttons centered over canvas