A Simple JoyStick That Uses HTML5, Canvas, and Vanilla JavaScript


JoyStick 2 is a simple JoyStick for web applications that use HTML5, Canvas, and JavaScript. You can simply add a JoyStick to your HTML5 page, the basic configuration is ready to use.

The joyStick can be used either on touchscreen devices or on devices that use mice, touchpads, or similar pointing systems. The joyStick is developed for remote control via the web in the robot, and it can be used for all other domains.

Note: The code does not use JQuery or any other framework, but only vanilla JavaScript.

Must Read: Micro Vanilla Javascript (ES6) Class Makes Easy Scrolling Events

How to make use of it:

1. Load the main JavaScript file joy.js into the document.

<script src="joy.js"></script>

2. Create a container on which you want to display the joystick.

<div id="joyDiv"></div>

3. Initializing the library.

var joy = new JoyStick('joyDiv');

4. Possible parameters to customize the joystick.

var joy = new JoyStick('joyDiv',{

    // The ID of canvas element
    title: 'joystick',

    // width/height
    width: undefined,
    height: undefined,

    // Internal color of Stick
    internalFillColor: '#00AA00',

    // Border width of Stick
    internalLineWidth: 2,

    // Border color of Stick
    internalStrokeColor: '#003300',

    // External reference circonference width
    externalLineWidth: 2,

    //External reference circonference color
    externalStrokeColor: '#008000',

    // Sets the behavior of the stick
    autoReturnToCenter: true

5. Get the position and direction of the stick.


6. Or get the stick values using the new callback.

var Joy = new JoyStick('joyDiv', {}, function(stickData) {
    joy1IinputPosX.value = stickData.xPosition;
    joy1InputPosY.value = stickData.yPosition;
    joy1Direzione.value = stickData.cardinalDirection;
    joy1X.value = stickData.x;
    joy1Y.value = stickData.y;

Advanced Options

All configuration parameters are optional and must be passed in JSON format, therefore it is sufficient to indicate only the parameters for which you want to provide a configuration other than the Default value.

  • title {String} (optional) – The ID of the canvas (Default value is ‘joystick’)
  • width {Int} (optional) – The width of the canvas, if not specified is set at width of the container object (Default value is the width of the container object)
  • height {Int} (optional) – The height of the canvas, if not specified is set at height of the container object (Default value is the height of the container object)
  • internalFillColor {String} (optional) – Internal color of Stick (Default value is ‘#00AA00’)
  • internalLineWidth {Int} (optional) – Border width of Stick (Default value is 2)
  • internalStrokeColor {String}(optional) – Border color of Stick (Default value is ‘#003300’)
  • externalLineWidth {Int} (optional) – External reference circumference width (Default value is 2)
  • externalStrokeColor {String} (optional) – External reference circumference color (Default value is ‘#008000’)
  • autoReturnToCenter {Bool} (optional) – Sets the behavior of the stick, whether or not, it should return to zero position when released (Default value is True and return to zero)

See Demo And Download

Official Website(bobboteck): Click Here

This superior jQuery/javascript plugin is developed by bobboteck. For extra Advanced Usage, please go to the official website.