Why doesn't my textbox show over my canvas element?

I'd like to use Raphael.js and create some nice diagrams / SVG graphics for my site. I want users to be able to enter text content which would normally be via a <input type="text"> element in normal html.

Is there anyway that I can use this element on top of a <canvas> element, so that I can have my user 开发者_开发知识库enter text that way, or do I have to roll my own by listening for keystrokes and painting the characters onto the element?

Rephrasing Question

Why can't I see the text field if I do this:

<canvas style="background-color:blue;height:100px;width:100px>
    <input type="text" style="background-color:white;z-index:101" />
</canvas>

and if this is not possible, what are the alternatives?

Many thanks

There needs to be some way to fallback to alternative content (like a static image or a text "Get a browser with canvas support") for older browsers that do not understand the canvas element. The children of the canvas element are designated for that purpose.

You can, however, position the input over the canvas with position:absolute (relative, or static):

<canvas style="background-color:blue;height:100px;width:100px">
</canvas>
<input type="text" style="z-index:101; position:absolute; top:10px; left:10px;"/>

Here's a live demo.