JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="cnv" width="500" height="400" style="border:red 1px solid" onmousemove="point_(event)" onmouseover="javascript:mouseInCanvas=true" onmouseout="javascript:mouseInCanvas=false"></canvas>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
<div id="test6"></div>
<div id="test7"></div>
<div id="test8"></div>
<div id="test9"></div>
<div id="test10"></div>

JavaScript

//initializating vars
//canvas
var canvas = document.getElementById('cnv');
var cnv = document.getElementById('cnv').getContext("2d");

//preloading images
        var graph = new Object();

        graph.player = ["red:90,20:0,20:270,20:180,10","blue:90,10:00,40:270,10:180,5"];

//this is array where we store all ingame objects
var allObjects = new Array();

//this is array where we store all objects thats must be drawn
var objectsInFrame = new Array();

//this is time in milliseconds script will delay befor drawing frame
var frameRate = 41;

//when this var will be false, engine will stop drawing frames
var gameOn = true;

//mouse cords
var mouseX;
var mouseY;
var mouseInCanvas = false;
window.onload = ini;

function ini() {
//start running game
player("Flirer",100,100,50,50,"player",90,5);
startGame();

}

function player(name,x,y,width,height,img,rotate,rotateSpeed) {
//Our player object
rotate = typeof(rotate) != 'undefined' ? rotate : 0;
allObjects.push(new Array(name,x,y,width,height,img,rotate,"Player"));
}

function startGame() {
//this fucntion will start drawing frame in our canvas
    
    setTimeout('drawFrame()',frameRate);
}

function drawFrame() {
    cnv.clearRect(0,0,canvas.width,canvas.height);
    
    if (gameOn == true) 
        {
            
            startGame();
        }
        
    var i = 0;
    do  {
        drawObject(allObjects[i]);
        i++;
    }
    while (i<allObjects.length)
    
}

function drawObject(obj) {
//this function will draw objects that it gets
if (mouseInCanvas) {
allObjects[0][6] = Math.round(angleOfObject(obj));
moveObj(obj);
}
if (obj[5]=="player") {
    for(var i=0;i<graph.player.length;i++) {
        var splited = graph.player[i].split(":");
        cnv.beginPath();
        cnv.fillStyle = splited[0];
        cnv.moveTo(getX(splited[1],obj),getY(splited[1],obj));
        
        
        for(var j=2;j<splited.length;j++) {
            cnv.lineTo(getX(splited[j],obj),getY(splited[j],obj));
        }
    ...