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);


window.addEventListener('touchstart', function(e) {
    if(moveJoy.tid == -1 || cameraJoy.tid == -1) {
        for(var i = 0; i < e.touches.length; i++) {
            var t = e.touches[i];

            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};
            }
        }
    }
});

window.addEventListener('touchmove', function(e){
    for(var i = 0; i < e.changedTouches.length; i++) {
        var t = e.changedTouches[i];

        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";

     ...