An example of how to serve a mobile touchpad on your HTML5 Phaser game.

Mobile-or-desktop.js

CanyonRunner.Level1.prototype = {

        create: function() {
                //START MUSIC
                ///////////////////
                this.sound = this.game.add.audioSprite('sound');
                this.sound.play('aronara');
                //////////////////
                //SET BACKGROUND
                //////////////////
                this.background = this.game.add.tileSprite(0, -100, 2731, 800, 'desert');
                this.background.fixedToCamera = true;
                ///////////////////////
                //CREATE TOUCH GAMEPAD
                ///////////////////////
                //Only Mobile Gets Touchpad
                if (!this.game.device.desktop) {
                    this.buttonUp = this.game.add.button(this.game.world.centerX - 300, this.game.world.centerY + 50, 'sprites', null, this, 'up-arrow', 'up-arrow', 'up-arrow');
                    this.buttonUp.fixedToCamera = true;
                    this.buttonUp.onInputDown.add(function() {
                        this.up = true;
                    }, this);
                    this.buttonUp.onInputUp.add(function() {
                        this.up = false;
                    }, this);

                    this.buttonRight = this.game.add.button(this.game.world.centerX - 200, this.game.world.centerY + 100, 'sprites', null, this, 'right-arrow', 'right-arrow', 'right-arrow');
                    this.buttonRight.fixedToCamera = true;
                    this.buttonRight.onInputDown.add(function() {
                        this.right = true;
                    }, this);
                    this.buttonRight.onInputUp.add(function() {
                        this.right = false;
                    }, this);

                    this.buttonDown = this.game.add.button(this.game.world.centerX - 300, this.game.world.centerY + 150, 'sprites', null, this, 'down-arrow', 'down-arrow', 'down-arrow');
                    this.buttonDown.fixedToCamera = true;
                    this.buttonDown.onInputDown.add(function() {
                        this.down = true;
                    }, this);
                    this.buttonDown.onInputUp.add(function() {
                        this.down = false;
                    }, this);

                    this.buttonLeft = this.game.add.button(this.game.world.centerX - 400, this.game.world.centerY + 100, 'sprites', null, this, 'left-arrow', 'left-arrow', 'left-arrow');
                    this.buttonLeft.fixedToCamera = true;
                    this.buttonLeft.onInputDown.add(function() {
                        this.left = true;
                    }, this);
                    this.buttonLeft.onInputUp.add(function() {
                        this.left = false;
                    }, this);
                }
                //Desktop & Mobile Get Different Firing Buttons
                if (this.game.device.desktop) {
                    this.fireButton = this.game.add.button(this.game.world.centerX - 60, this.game.world.centerY - 300, 'sprites', null, this, 'fire-missile-button-desktop', 'fire-missile-button-desktop', 'fire-missile-button-desktop');
                    this.fireButton.fixedToCamera = true;
                    this.fireButton.onInputDown.add(function() {
                        this.fireMissile();
                    }, this);

                } else {
                    this.fireButton = this.game.add.button(this.game.world.centerX - 350, this.game.world.centerY - 150, 'sprites', null, this, 'fire-missile-button-mobile', 'fire-missile-button-mobile', 'fire-missile-button-mobile');
                    this.fireButton.fixedToCamera = true;
                    this.fireButton.onInputDown.add(function() {
                        this.fireMissile();
                    }, this);
                }
                
        ...