x and y coordinates outside the range of (-100, 100)

[ebabcock1]

Inside my callback function, I'm seeing values for X and Y that are occasionally below -100 and above 100.

To see this, I added the following code to my HTML document:

<div id="joydiv" style="width: 200px; height: 200px; margin: 50px;"></div>
<script>
var joy = new JoyStick("joydiv", {"title": "Head", "width": 200, "height":200, "autoReturnToCenter": false}, function(joydata) {
  console.log(joydata);
});
</script>

When I drag the joystick, I see the X and Y values in the console. As I move from the center to the right edge of the joystick control, the x value increases as expected, but peaks at 110, and then drops to 100, as shown here:

Object { xPosition: 148, yPosition: 98, x: "96", y: "4", cardinalDirection: "E" }
Object { xPosition: 151, yPosition: 98, x: "102", y: "4", cardinalDirection: "E" } <=====
Object { xPosition: 155, yPosition: 98, x: "110", y: "4", cardinalDirection: "E" } <=====
Object { xPosition: 150, yPosition: 98, x: "100", y: "4", cardinalDirection: "E" }

Moving the joystick in other directions causes similar results.

X and Y should never be below -100 or above 100.

I suspect the issue is in the drawInterval() function where movedX and movedY are clipped. internalRadius should be replaced by maxMoveStick in these statements.

I'm seeing this in version 2.0.0 of joy.js on Firefox 97 on Windows 10.