How to use SQUARIFIC joystick control in html web page

I'm trying to use SQUARIFIC joystick control from here https://github.com/Squarific/Touchscreen-Joystick#readme

But i cant work out how to display it on my page, here is my current code 

<script src="/socket.io/socket.io.js"></script>
<script src="/joystick.js"></script>

<script>
    var socket = io.connect('localhost');

    socket.on('serverStatus', function (data) {
        document.getElementById("serverState").innerHTML=data.status;
    });

    socket.on('arduinoStatus', function (data) {
        document.getElementById("arduinoState").innerHTML=data.status;
    });

    socket.on('leftPingStatus', function (data) {
        document.getElementById("leftPing").innerHTML=data.status;
    });

    socket.on('rightPingStatus', function (data) {
        document.getElementById("rightPing").innerHTML=data.status;
    });


    var steeringJoystick = new SQUARIFIC.framework.TouchControl(document.getElementById(document.steering),
        pretendArrowKeys: false,
        mindistance: 25,
        maxdistance: 75,
        middleLeft: 25,
        middleTop: 25
    });
</script>

<html>
    <body>
       <center>
            <p id="serverState">Server Disconnected</p>
            <p id="arduinoState">Arduino Disconnected</p>
            Left <p id="leftPing">0</p>
            Right <p id="rightPing">0</p>
            <br>
            <p id="steering">JOYSTICK SHOULD BE HERE</p>   
        </center>
    </body>
</html>

Can anyone help me with as to how i should be using this control?

Thanks joe

document.getElementById(document.steering) should be document.getElementById("steering").

Also I would like to note that you have to style the joystick yourself so give it a background color and a width/height.