JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas">
</canvas>

<div id ="control">
  <img id = "m_point" src="https://punkave.com/images/logo-black-circle.png">
 <img id = "c_point" src="https://punkave.com/images/logo-black-circle.png">
 
  <img id = "move" src="https://punkave.com/images/logo-black-circle.png">
  <img id = "camera" src="https://punkave.com/images/logo-black-circle.png">
</div>  
<p id="log">I'm your father 

</p>

CSS

#move{
  position:absolute;
  width:100px;
  height:100px;
  bottom:40px;
  left:40px;
}

#camera{
  position:absolute;
  width:100px;
  height:100px;
  bottom:40px;
  right:40px;
}

#m_point {
  bottom:74px;
  left:74px;
  width:32px;
  height:32px;
}

#c_point {
  bottom:74px;
  right:74px;
  width:32px;
  height:32px;
}

img {
  position:absolute;
}
div {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

JavaScript

var log=document.getElementById('log');
log.innerHTML="ohh noooo";

var nope=document.getElementById('control');
var m_pope=document.getElementById('m_point');
var c_pope=document.getElementById('c_point');

var Joy = function(md) {
	this.start =  {x:0,y:0};
  this.dir = {x:0,y:0};
  this.tid = -1;
  this.pos ={x:0,y:0};
  this.maxDelta = md || 50;
 	this.mathDir = function(){
       var d_x = (this.pos.x - this.start.x);
       var d_y = (this.pos.y - this.start.y);
       var m = Math.sqrt(d_x*d_x + d_y*d_y);
       var mag = (m/this.maxDelta).clamp(0,1);
      
       this.dir.x = (d_x/m) * mag;
       this.dir.y = (d_y/m) * mag;
       //console.log("mathed dir:"+this.dir.x +":"+this.dir.y);
       return this.dir;
  };
  console.log("Joy created");
};

var m_s_pos = getPosition(m_pope);
var c_s_pos = getPosition(c_pope);
var moveJoy = new Joy(50);
var cameraJoy = new Joy(50);


document.ontouchstart = function(e){
  if(moveJoy.tid == -1 || cameraJoy.tid == -1) {
    for(var t of e.touches) {
        if(cameraJoy.tid==-1 && moveJoy.tid!=t.identifier && e.target.id == "camera"){
            cameraJoy.tid = t.identifier;
            cameraJoy.start = {x:t.clientX,y:t.clientY};
        }
        
        if(moveJoy.tid==-1 && cameraJoy.tid!=t.identifier && e.target.id == "move"){
            moveJoy.tid = t.identifier;
            moveJoy.start = {x:t.clientX,y:t.clientY};
        }
    }
  }
};
document.ontouchmove=function(e){
			for(var t of e.changedTouches) {
      		if(t.identifier == moveJoy.tid) {
          	moveJoy.pos.x = t.clientX;
            moveJoy.pos.y = t.clientY;            
            moveJoy.mathDir();
            
          	m_pope.style.top = moveJoy.dir.y*50 + m_s_pos.y + "px";
          	m_pope.style.left = moveJoy.dir.x*50 + m_s_pos.x + "px";
          
            log.innerHTML="move:"+moveJoy.dir.x+":"+moveJoy.dir.y;
          }
          
          if(t.identifier == cameraJoy.tid) {
          	cameraJoy.pos.x = t.clientX;
          ...