HTML text field over canvas element

Question

I have been playing around with text in the canvas, and although it is easy to draw, it is not easy to interact with. I began implementing keyboard press functionality to update text on the canvas, but then gave up when I realized I would have to incorporate cut,copy,past and undo functionality.

Is there anyway to "float" html elements on top of eachother? For example can I float a text field ontop of certain parts of my canvas, disable the border and set the color to the canvas color?

Thank You

Solution 1

You may use the CSS position: absolute property with z-index: 1 to place elements above the canvas.

EDIT: added an example: here the div that contains "1234" floats on top of the div that contains "abcd" (that could be replaced with a canvas element)

<div id="wrapper">
    <div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;">
        abcd
    </div>
    <div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px; background-color: green;">
        1234
    </div>
</div>

Solution 2

You can use 'somehow' invisible text-control to gain control over the text being input and copy innerHTML on the canvas on keypress. Im doing similar stuff, copying computed font css attributes of the text present in DOM and more. Z-indexes work pretty straight. The setFocus() function can help too.