JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="padOne">
    <img src="">incase canvas cant run</img>
  </canvas>

CSS

body {
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

canvas {
  position: absolute;
  overflow: hidden;
  background-color: black;
}

JavaScript

console.log("rotating_recs");
// create canvas and add resize
var canvas,ctx;
function createCanvas() {
    canvas = document.createElement("canvas");
    canvas.style.position = "absolute";
    canvas.style.left     = "0px";
    canvas.style.top      = "0px";
    canvas.style.zIndex   = 1000;
    document.body.appendChild(canvas);
}

function resizeCanvas() {
    if(canvas === undefined){
        createCanvas();
    }
    canvas.width          = window.innerWidth;
    canvas.height         = window.innerHeight;
    ctx            = canvas.getContext("2d");
}

resizeCanvas();
window.addEventListener("resize",resizeCanvas);
//*********************************************************************
//*********************************************************************
//*********************************************************************
//*********************************************************************

var Player = function(x,y,height,width,rot){
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.rot = rot;
  this.objWinX = 0; //translate the window object and then apply to this
  this.objWinY = 0;

  this.draw = function(){
    ctx.fillStyle = "grey";
    ctx.fillRect(this.x, this.y, this.height, this.width);
  }
}

var tMatrix = { //translation matrix
  x1: 0,
  y1: 0
}


var user = new Player(0, 0, 40, 40, 0);
user.x = -20;
user.y = -20;

var user2 = new Player(0, 0, 40, 40, 0);
user2.x = -20;
user2.y = -20;

let rotNum = 0;
let rot = 0;


//*********************************************************************
//*********************************************************************
//*********************************************************************
//*********************************************************************
  function update(time){
//CANVAS
    var w,h;
    w = canvas.width;  // get canvas size incase there has been a resize
    h = canvas.height;
    ctx.clearRect(0,0,w,h);  // clear the canvas
   ...