Allowing the user to type text in a HTML5 Canvas game

Question

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.

I don't think there is any out of the box capability in Kinetic JS for adding text box. Please refer to KineticJS documentation for the same : http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-text-tutorial/ It will answer most of your questions. You need to create a text area in canvas by adding event handlers on Key Strokes on a rectangle. Then display the text received from user in the canvas in specific format. — Amber, Nov 17 '12 at 11:26
That discusses placing of text on the canvas, not the capture of text from a user. I'm already using a lot of KineticJS Text to make my buttons, what i want is a way of saying, Please enter your name: (which will be using the text attribute) and then capture the text within a Canvas JS funciton. — Craigeve, Nov 17 '12 at 11:31
I have just edited my answer. There is no such thing like HTML text area in Kinetic JS. — Amber, Nov 17 '12 at 11:32
Sorry, didn't see your edit! Will have a look at capturing key strokes over a rectangle and see if I can then feed it back via the text function. — Craigeve, Nov 17 '12 at 11:33

score 4 · Accepted Answer · answered Nov 17 '12 at 13:08

4

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.

answered Nov 17 '12 at 13:08

Mikko Ohtamaa

82,057
50
264
435

I'll be honest, i'm more a Javascript/Java programmer than a HTML one. So basically i've ignored CSS at the moment (so no – Craigeve Nov 17 '12 at 15:06
Yes. It the trick is absolutely positioned elements relative parent. – Mikko Ohtamaa Nov 17 '12 at 16:04

score 3 · Answer 2 · answered Nov 29 '12 at 11:45

3

Quick and dirty way:

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

It works, but certainly is not the prettiest way to do it. iOS actually has a quite nice prompt.

answered Nov 29 '12 at 11:45

pillar15

576
3
11

score 2 · Answer 3 · answered Oct 24 '16 at 01:25

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

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

As you can see, I can type in the box and have it display on the screen. It's 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 related to CanvasInput and am not receiving anything for this post :)

Allowing the user to type text in a HTML5 Canvas game

3 Answers3

Linked