JSFiddle - React, Tailwind, and code Playground

HTML

<body>  
		<canvas width="500px" height="500px"></canvas>
	</body>

CSS

body {
		    padding: 0px;
		    margin: 0px;
		  }

JavaScript

console.log('start');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var rec1 = {x: 100, y: 100, width: 30, height: 80, angle: Math.PI / 4};
var rec2 = {x: 150, y: 50, width: 60, height: 60, angle: Math.PI / 4};
var rec1XY = rotateRectangle(rec1, rec1.angle);
var rec2XY = rotateRectangle(rec2, rec2.angle);
var mtvRec = {x: undefined, y: undefined, width: rec2.width, height: rec2.height, angle: rec2.angle, velocity: {x: 0, y: 0}};
var game = {};
game.lastTime = null;
game.timeStep = null;
var collision = false;
var step = 5;
var velocity = {x: -20, y: 20};
var moved = true;
var bounce = false;

var loop = function (time) {
	// time
	if (game.lastTime !== null) {
		game.timeStep = time / 1000 - game.lastTime;
        
        if (collision !== undefined && collision.bool !== true)
        {
            rec2.x += velocity.x * game.timeStep;
            rec2.y += velocity.y * game.timeStep;
            moved = true;
        }
        if (mtvRec.x !== undefined)
        {
            mtvRec.x += mtvRec.velocity.x * game.timeStep;
            mtvRec.y += mtvRec.velocity.y * game.timeStep;
            moved = true;
        }
	}
	game.lastTime = time / 1000;
    
    collision = obbCollisionRectangles(rec1, rec2);
    //console.log(collision);
    
    if (moved)
    {
        ctx.clearRect(0, 0, 500, 500);
        ctx.save();
        ctx.fillStyle = 'blue';
        ctx.translate(rec1.x + rec1.width / 2, rec1.y + rec1.height / 2);
        ctx.rotate(rec1.angle);
        ctx.fillRect(-rec1.width / 2, -rec1.height / 2, rec1.width, rec1.height);
        ctx.restore();
        ctx.save();
        ctx.fillStyle = 'red';
        ctx.translate(rec2.x + rec2.width / 2, rec2.y + rec2.height / 2);
        ctx.rotate(rec2.angle);
        ctx.fillRect(-rec2.width / 2, -rec2.height / 2, rec2.width, rec2.height);
        ctx.restore();
        moved = false;
        // draw rectangles' corners
        rec1XY = rotateRectangle(rec1, rec1.angle);
    ...