Bug when working with two joysticks

[bern-aex]

I have two joysticks which are supposed to control movement and camera for a vehicle simulation respectively, and they are positioned next to each other in the html document. The first joystick works as expected, but the second uses the first joysticks center as its center, opposeed to using its own center.
This is my html code fro the joysticks:

And here is the JS:
var joy = new JoyStick('vehicle_joy',{
title: 'vehicle_joystick',
width: 100,
height: 100,
internalFillColor: '#00000F',
internalLineWidth: 2,
internalStrokeColor: '#00000F',
externalLineWidth: 2,
externalStrokeColor: '#00000F',
autoReturnToCenter: true
});

(The second joystick is the same only with a name change)

Steps to reproduce the behavior:

1. Create html and js documents with the code before
2. Try to move the second joystick. It moves as if its center was the one from the first joystick

I expected, as it should be natural, for each joystick to move respectively to thir own center.

• OS: Windows 11
• Browser: Chrome
• Version 120.0.6099.130

[bern-aex]

I also just noticed, as I was trying to move the joysticks using CSS, that applying any padding or margin to the joystick moves the joystick drawing, but not its center (it acts as if it had no padding or margin, being off-centered).