Add layers of arbitrary HTML on top of your canvas - buttons, menus, battle systems, whatever.
This plugin provides an ig.Overlay class which can be extended into HUDs, menu systems, battle systems for RPGs, you name it. It creates a div which overlaps the canvas and renders arbitrary HTML on top of it, all in a neat little package.
I'm currently using this in a hud.js class, which is toggled by the tab key and shows a health, stamina, and xp/level meter. The plugin is dependent on jQuery, so you'll need to include that. I would also strongly recommend Bootstrap, since it's such a beautiful UI framework and is well-suited for this.
1) Add jQuery and, if you like, Bootstrap to your index.html file or other landing page.
2) Add overlay.js to lib/impact.
3) If you want to hit the ground running with hud.js, save that as lib/game/overlays/hud.js, and follow the instructions at the top of the file.
From there, it's up to you. The update() function on the overlay can be used to power whatever you want - title screens, level selection, RPG battle systems, pause menus, map screens, HUDs, whatever.
You could even include additional libraries like Wijmo if you want access to things like speedometers.
Getting Started with jQuery
Getting Started with Bootstrap
If you have any questions/comments/feedback of any sort, please add a comment!