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.

Joel

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 : html5canvastutorials.com/kineticjs/… 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. – Cheju

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. – Joel

I have just edited my answer. There is no such thing like HTML text area in Kinetic JS. – Cheju

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. – Joel

Answer 1

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.

Assemblage

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 <style> part of the document) and just concentrated on creating a single div which i load the KineticJS canvas in. If i do follow that guide, all my objects inside the canvas will have to be transposed i'm guessing? – Joel

Yes. It the trick is absolutely positioned elements relative parent. – Assemblage

Answer 2

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.

Ionosphere

Answer 3

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 :)

Croaky