JSFiddle - React, Tailwind, and code Playground

by magneto903

HTML

<!DOCTYPE html>
<html>
<head>
	<title>multitouch</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="mobile_control">
		<div id="left_joystick">
			<div id="left_stick" >
				
			</div>
		</div>
		<div  id="right_joystick">
			<div id="right_stick" >
				
			</div>
		</div>
	</div>
	<canvas width="800" height="800" id="canvas"></canvas>
</body>
</html>

CSS

#mobile_control {
			position: absolute;
			width: 80%;
		}

		#left_joystick, #right_joystick {
			width: 20vmin;
			height: 20vmin;
			background-color: rgba(0, 0, 0, 0.15);
			border-radius: 50%;
			display: inline-block;
		}

		#right_joystick {
			float: right;
		}

		#left_stick, #right_stick {
			width: 7vmin;
			height: 7vmin;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 50%;
			position: absolute;
			margin-top: 50%;
			margin-left: 50%;
		}

JavaScript

//-------------------------//
// Initialization and 
// Global Variables
//-------------------------//

var windowWidth = $(window).width();
	var windowHeight = $(window).height();

var noPX = function(string) {
    return string.slice(0, string.length-2);
}

var num = function(variable) {
    return Number(variable);
}
$("#mobile_control").css('margin-top', windowHeight*0.65);
	$("#mobile_control").css('margin-left', windowWidth*0.10);
//+ num(noPX($("#stick").css('height')))/2
//+ num(noPX($("#stick").css('width')))/2
	$("#left_stick").css('margin-top', ( num(noPX($("#left_joystick").css('width')))-num(noPX($("#left_stick").css('height'))))/2);
	$("#left_stick").css('margin-left', ( num(noPX($("#left_joystick").css('height')))-num(noPX($("#left_stick").css('width'))))/2);
	
	$("#right_stick").css('margin-top', ( num(noPX($("#right_joystick").css('width')))-num(noPX($("#right_stick").css('height'))))/2);
	$("#right_stick").css('margin-left', ( num(noPX($("#right_joystick").css('height')))-num(noPX($("#right_stick").css('width'))))/2);

var left_joystick_r = num(noPX($("#left_joystick").css('width')))/2;
var left_joystick_x = $('#left_joystick').offset().left + left_joystick_r;
var left_joystick_y = $('#left_joystick').offset().top + left_joystick_r;

var left_stick_r= num(noPX($("#left_stick").css('width')))/2;

var right_joystick_r = num(noPX($("#right_joystick").css('width')))/2;
var right_joystick_x = $('#right_joystick').offset().left + left_joystick_r;
var right_joystick_y = $('#right_joystick').offset().top + left_joystick_r;
var right_stick_r= num(noPX($("#right_stick").css('width')))/2;

// Get the canvas.
var canvas = document.getElementById('canvas');

// Get a 2d drawing context.
var ctx = canvas.getContext('2d');

// Used to keep track of active touches.
var currentTouches = new Array;


//-------------------------//
// Helper Methods
//-------------------------//


var left_joystick = function(x,y) {

  	var angle = Math.atan2(y-left_joystick_y,...