Designing a user interface in Canvas using HTML5

Question

I've designed a small game in canvas, and I'd like to add an interface to it (just a standard thing with menu options like sound toggling and other settings, etc).

In Angry Birds html5 (http://chrome.angrybirds.com) they don't have any html elements other than canvas to handle their interface.

I was just wondering, would it be bad practise for me to have my entire game designed in html5 canvas, and then the user interface totally designed using html elements like divs, with css styling?

I suppose the alternative would be somehow writing some sort of collision system to determine where the user clicks on the screen.

I was hoping someone could point me in the right direction here, and tell me which method (pure canvas, or with html elements) would be best for my canvas game. My 100% concern here is performance, testing both would take days and would be a tremendous pain.enter code here

Yes, it's a bad practice to do a haphazard, incomplete emulation of standard rich UI elements yourself. Invariably you will fail to make your implementation work the same way as the OS-level or browser-level widgets (e.g. Flash-based scrollbars that don't work with the mouse wheel, or don't honor system-level smooth scrolling settings) and your users will suffer the pain of violated expectations and reduced interaction. However, this is a subjective (though common) opinion, not a hard-and-fast answer as Stack Overflow is designed around. Voting to close as not definitively answerable. — Phrogz
– Phrogz, Commented Apr 6, 2012 at 2:40

Saturnix · Accepted Answer · 2012-04-06 02:29:58Z

1

It's not so difficult to determine where the user clicked on the canvas. I use the library gee which makes it really easy. Just follow the examples in the API to create your gee canvas and always access mouse position (g.mouseX, g.mouseY) and mouse actions (g.mousedrag, g.mousedown, g.mouseover, ecc...). Off course, it also handles automatic refresh for animation (g.draw).

About your question: its just up to you if to make the UI in the canvas or outside with CSS. Usually, you dont need to care about performance in the user interface and there is no "better approach": your performance depends on how you implement your code. A bad implementation may lead to performance lags, regardless of the technology you're using to interface it.

answered Apr 6, 2012 at 2:29

Saturnix

10.6k19 gold badges70 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leah Zorychta Over a year ago

Very powerful library, however unfortunately my goal is not to use any external libraries when creating my canvas game.

Saturnix Over a year ago

then you can integrate its content in your own game or just implement it by yourself using js handlers...

Collectives™ on Stack Overflow

Designing a user interface in Canvas using HTML5

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related