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.


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

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

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.


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.


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.

  • \$\begingroup\$ Yeah, but this will be more complicated if integrated to the facebook app canvas wont it? I prefer not linking the user around. \$\endgroup\$ – justanotherhobbyist Mar 24 '12 at 18:07
  • \$\begingroup\$ 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 ;) ). \$\endgroup\$ – phtrivier Mar 26 '12 at 12:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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