Adding on screen buttons to allow player to move left right up

Hi I'm trying to add  onscreen buttons to move my sprite around my website. 

https://alfielytorres.github.io/hackercastle/

right now my code is as follows 

//load keyboard
class Keyboard {
	constructor() {
		this.pressed = {};
	}
	watch(el) {
		el.addEventListener('keydown', (e) => {
			this.pressed[e.key] = true;
		});
		el.addEventListener('keyup', (e) => {
			this.pressed[e.key] = false;
		});

	}



app.loader.load((loader, resources) => {
	// create a new keyboard instance
	let kb = new Keyboard();
	kb.watch(app.view);

.....

});



...

	//Jumping
		if (characterPosition.vy < 0) {
			characterPosition.y += characterPosition.vy;
		}
		if (!kb.pressed.ArrowUp && touchingGround && characterPosition.jumped) {
			characterPosition.jumped = false;
		}
		if (kb.pressed.ArrowUp && touchingGround && !characterPosition.jumped) {

			characterPosition.vy = -19;
			characterPosition.jumped = true;
		}

		//Right
		if (kb.pressed.ArrowRight) {
			characterPosition.direction = 0;
			characterPosition.vx = Math.min(8, characterPosition.vx + 2);
		}
		if (characterPosition.vx > 0) {
			characterPosition.vx -= 1;
		}
		//Left
		if (kb.pressed.ArrowLeft) {
			characterPosition.direction = 1;
			characterPosition.vx = Math.max(-8, characterPosition.vx - 2);
		}
		if (characterPosition.vx < 0) {
			characterPosition.vx += 1;
		}