26

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

puk
  • 16,318
  • 29
  • 119
  • 199
  • 3
    No, CSS float is for making elements wrap around other elements. It has nothing to do with 'floating' elements on top of other elements. You may be thinking of z-index or absolute positioning. – glomad Mar 11 '11 at 22:25
  • yess, chris pointed this out in the answer below. Thanks – puk Mar 11 '11 at 23:04

2 Answers2

29

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>
ChrisJ
  • 5,161
  • 25
  • 20
  • Thanks. But what about the suggestion Charlie Made above of using "CSS Float" is that better, worse, the same? – puk Mar 11 '11 at 21:23
  • I don't think floating elements will stack on top of each other. You need position: absolute or position: fixed to achieve this. – ChrisJ Mar 11 '11 at 21:25
  • Also how would I add CSS attributes dynamically? I am creating the field dynamically like so but I can't get my head around how to add css properties to it. – puk Mar 11 '11 at 21:34
  • if field is a reference to your new element, you may write `field.style.property = value;` in Javascript. – ChrisJ Mar 11 '11 at 21:39
  • Or `field.setAttribute("style", "contents of the style attribute")`. – ChrisJ Mar 11 '11 at 21:41
  • Chris, i changed my approach so I have some
    elements with text fields in them, and I hide them and use them when need be, instead of dynamically creating them (I ran into problems dynamically inserting them into my document, it threw a hierarchy error). But I can't seem to change the css properties. For example, will not change the text field font color to white. Is there a "reload" command I need to use? Cheers
     – puk Mar 11 '11 at 23:03
  • To change the color, you could use `field.setAttribute("style", "color: white")` if color is the only CSS property of the element. Or, field.style.color = "white". – ChrisJ Mar 11 '11 at 23:46
  • @puk Note that the JS versions of CSS properties use camelCase instead of dashed-case. That is to say, where you would use `background-color: #fff` in CSS, you would use `field.style.backgroundColor = "#fff"` in JS. – Nathan Ostgard Mar 12 '11 at 12:18
  • @Nathan, I actually read that somewhere else. Just to be on the safe side I'll stick with `setAttribute` – puk Mar 12 '11 at 23:55
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.

tomasb
  • 1,663
  • 2
  • 22
  • 29