Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

How would I make a start screen for a game using HTML5 canvas?

I'm not looking for something advanced, just the new game button and highscore link etc. The question might be stupid, but I've never done anything similar, and the tutorials out there don't cover the subject.

Is it enough to just make a fillText with an onclick function? Is there a way to find out the size of the text?

Help appreciated.

share|improve this question
add comment

4 Answers

up vote 4 down vote accepted

There are many approaches to this. But, basically, you want to draw these buttons in, say, GIMP, and then put them on screen using a canvas. Then, register an onclick event to the canvas, and when it fires you want to iterate through an array of buttons (I suggest you make a constructor function for that; that would be a class in other languages), and when you see that a button has been clicked, you execute it's onclick function. The button's onclick function can be something like new Game();, given that you wrapped your game inside a function like I always do.

For that, you need to know the position of the canvas in the web page, because onclick tells you the mouse's absolute position, and you need a position relative to the canvas. That is simple to solve. First, you calculate the offset of your canvas with this:

function findPos(obj) 
    var curleft = curtop = 0;

    if (obj.offsetParent) 
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;    
        while (obj = obj.offsetParent);
    return [curleft,curtop];

CO = findPos(canvas); //CO stands for canvas offset

Once you have that, this should be how you calculate the actual click position:

var mouse = [0, 0];

function onclick(e)
    mouse[0] = e.pageX - self.CO[0];
    mouse[1] = e.pageY - self.CO[1];
    /*Rest of the code*/

canvas.addEventListener("click", onclick);

This is all if you actually want to create your start menu using a canvas. You might not want to do that, because it would be easier with just HTML. This has several advantages though, like animation and so forth...

Also, there is a way to find out the text size. The height of the text is simply the font size, but to get the width of the text to be drawn use this:

context.measureText("some random text").width

share|improve this answer
Like I expected then, I wish there was a simpler way. Thank you. –  hustlerinc Mar 24 '12 at 18:08
Well, it can be simpler! Just use HTML, as others suggested. But then you can only expect basic aesthetics which might not suit you. –  akled Mar 24 '12 at 18:29
Is this useable in facebook app canvas? The normal html way? –  hustlerinc Mar 24 '12 at 19:15
No idea, I've never developed using their SDK... –  akled Mar 24 '12 at 19:17
add comment

It might work to just use anchors. then hide them with css and show the game canvas onclick. If you don't want that, you could make a picture which you know the width of and then onclick see if the mouse is on it.

share|improve this answer
add comment

Most compelling games seem to use their game engine in the start-screen.

So it will be a specially set-up version of the rendering / gameplay engine playing a demo or autonomous activity (Examples: Any console racing game, Transport Tycoon, etc).

So I expect it's a case of running some kind of state-machine over the top of your normal game-loop doing its normal "thing".

PS: Thanks for the comment on my previous answer.

share|improve this answer
add comment

Depending on the kind of start screen you want to do, you might not need a canvas at all.

Your "html5" game is a web page, after all, so if your start screen is pretty "static", you might want to do it in simple HTML+CSS, with images, fonts, and links (as in ' < a > ' tags) to pages that would contain the actual game (most likely a page with a large canvas that you draw something on).

And if you want to embed the highscore list, you can use 'standard' web techniques (generating the list on the server side and using a template engine to embed it the page, load it with ajax, whatever works.)

Hoping this helps.

share|improve this answer
Yeah, but this will be more complicated if integrated to the facebook app canvas wont it? I prefer not linking the user around. –  hustlerinc Mar 24 '12 at 18:07
Ah, right, sorry - you never mentioned Facebook. If you're constrained to a canvas, then I suppose a variation of fillText (maybe using a custom font to make things look better ?) and getting mouse position on click event would work. Also, avoid using static images for the text if you intent to internationalize your game (coming from a french speaker ;) ). –  phtrivier Mar 26 '12 at 12:00
add comment

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.