JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="background" width="500" height="500"></canvas>
<div id="output"></div> <br/>
<p> Click and drag to change angle</p>

CSS

#background {
    background: #000000;
    border:1px solid black;
}

JavaScript

var element 	= document.getElementById('background');
var debug 		= document.getElementById('output');
var ctx 		= element.getContext("2d");

var camera 		 = {};
    camera.x 	 = 0;
    camera.y 	 = 0;
	camera.angle = 0.5;

var scale 		= 1.0
var obj 		= [];
var mainAngle 	= 0.6;
var t 			= {};
    t.radius 	= 200;
    t.duration 	= 10000; //10 seconds per rotation
    t.rotSpeed 	= 2 * Math.PI / t.duration; // Rotational speed (in radian/ms)
    t.start 	= Date.now();
	t.x;
	t.y;
obj.push(t);

var originX 	= 0;
var originY 	= 0;

///////angle for camera////////////////////////
element.addEventListener('mousedown', function(e) { cameraAngle(e,this);}, false);
function cameraAngle(evt, el) {
    var y = evt.offsetY;

    function update(e) {
        var dify = y - e.offsetY;
        y = e.offsetY;
        camera.angle -= dify / 500;
        if (camera.angle < 0) {
            camera.angle = 0;
        } else if (camera.angle > 1) {
            camera.angle = 1;
        }
    }

    function clear() {
        el.removeEventListener('mousemove', update, false);
        this.removeEventListener('mouseup', clear, false);
    }
    el.addEventListener('mousemove', update, false);
    document.body.addEventListener('mouseup', clear, false);
}
//////////////////////////////////
///moving circle around origin////
function updateObj() {
    for (var i = 0; i < obj.length; i++) {
        var delta = Date.now() - obj[i].start;
        var angle = obj[i].rotSpeed * delta;

        obj[i].x = obj[i].radius * Math.cos(angle);
        obj[i].y = obj[i].radius * camera.angle * Math.sin(angle);

        var vectorX = obj[i].x - 0;
        var vectorY = obj[i].y - 0;
        obj[i].angle = Math.atan2(vectorY, vectorX);
        obj[i].trueAngle = angle;

        debug.innerHTML = 'Radians: ' + obj[i].angle;
        debug.innerHTML += '<br/>Camera Angle: ' + camera.angle;
    }
}
////////////////////////////////

function draw() {
    updateObj();
    ctx.clearRect(0, 0,...