When using large non-square width and heights (especially width) the joystick has very little movement in one axis

[tyeth]

Laptop 1980x1200, desktop chrome full size, setting size of div to 60vw 60vh, results in a short wide box, and the joystick movement space is very limited in vertical direction. I've made this change, and also set a Max and Min on the returned X and Y.

I changed the calculation for internalRadius and all is well:

var smallestDimension = Math.min(canvas.width,canvas.height);
var internalRadius = (smallestDimension-((smallestDimension/2)+10))/2;

This is the minor change to X / Y to be capped at +/-100

/**
* @desc Normalizzed value of X move of stick
* @return Integer from -100 to +100
*/
this.GetX = function ()
{
    return Math.max(-100,Math.min(100, (100*((movedX - centerX)/maxMoveStick)))).toFixed();
};

/**
* @desc Normalizzed value of Y move of stick
* @return Integer from -100 to +100
*/
this.GetY = function ()
{
    return Math.max(-100,Math.min(100, ((100*((movedY - centerY)/maxMoveStick))*-1))).toFixed();
};