Search code examples
htmlcanvashtml5-canvaskineticjs

Allowing the user to type text in a HTML5 Canvas game

I'm trying to write my first HTML5 game using a combination of Canvas and the excellent KineticJS library and I've hit a bit of a wall early on.

What I want to do is ask the user to enter their name in a box in the game. Having done some research, i can't see any way of doing this outside getting a floating HTML element over that part of the canvas I'm using.

Is this correct?

Having grown up on a lot of Flash and web games, I'm sure each time I have to input a name or save file name, it's done directly into the game itself and it doesn't rely on the HTML to generate it?

Any advice on how to do this would be gratefully received.

Solution

  • You can get a floating HTML element on the top of canvas using the following CSS technique.

    http://css-tricks.com/absolute-positioning-inside-relative-positioning/

    • Make a wrapper div position: relative

    • Add canvas inside using position: absolute

    • Add other HTML controls inside using position: absolute

    This applies for all HTML elements, not just canvas.