make the mouse x and y work with collisions on buttons if the canvas is not at 0,0 http://stackoverflow.com/questions/17130395/canvas-html5-real-mouse-position http://jsfiddle.net/AbdiasSoftware/ds9s7/

Make the Joystick feature responsive in size to the dom element, or let it be set by the user upon initialization

Create some sort of "die" method or something like that to destroy the current JoyShtick and recreate it appropriately when the screen format changes

Make it so the user can instantiate a joystick the same way they do buttons?

You'd need to handle the .stickVector property differently. Maybe with incremented variable names like .stickVector1 and .stickVector2

Can you even modify property names to take an index in Javascript? I know you can in Actionscript...

*Edit - Just use an array of stickVector properties, no property name editing needed.

when moving the joystick does it make more sense for the entire top canvas to be cleared? Or just enough to clear the current position of the Joystick?