Geek Answers Handbook

Allow user to enter text in HTML5 Canvas

I'm trying to write my first HTML5 game using a combination of Canvas and the excellent KineticJS library, and I have already attacked the wall a bit.

What I want to do is ask the user to enter their name in the field in the game. After doing some research, I see no way to do this outside of getting the floating HTML element over the part of the canvas that I am using.

Is it correct?

Having climbed a lot of Flash and web games, I am sure that every time I have to enter a name or save a file name, it runs directly in the game itself, and it does not rely on HTML to generate this?

Any advice on how to do this would be greatly appreciated.

+8
html5 html5-canvas kineticjs canvas
source share
3 answers

You can get the floating HTML element at the top of the canvas using the following CSS technique.

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

  • Make wrapper div position: relative

  • Add canvas inside using position: absolute

  • Add other HTML controls inside using position: absolute

This applies to all HTML elements, not just the canvas.

+3
source share

Quick and dirty way:

var userInput = prompt('What is your name?');

It works, but certainly not the most beautiful way to do it. iOS really has a pretty nice invitation.

+3
source share

I know this is kind of old, but ...

Canvas Input is a great library that I use in my game:

enter image description here

As you can see, I can enter into the field and display it on the screen. It is easy to use:

 var input = new CanvasInput({ canvas: document.getElementById("ctx"), x: 0, y: 0, fontSize: 18, fontFamily: 'Arial', fontColor: '#212121', fontWeight: 'bold', width: 200, padding: 8, borderWidth: 1, borderColor: '#000', borderRadius: 3, onsubmit: function() { // your code here for submitting (when user presses enter) }, });

Disclaimer: I am in no way affiliated with CanvasInput and receive nothing for this message :)

+1
source share

More articles:


All Articles