JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div>
		<canvas id="canvas"></canvas>
	</div>
</body>

CSS

body {
			background: url("grid.png");
		}

		canvas {
			position: absolute;
			box-sizing: border-box;
			border: 1px solid red;
		}

JavaScript

var canvas = document.getElementById('canvas');
    canvas.width = 300;
    canvas.height= 150;
	var ctx = canvas.getContext('2d');
	var counter = 0;
	
	var shape = {
		top: 120,
		left: 120,
		width: 120,
		height: 60,
		rotation: Math.PI / 180 * 15
	};
	


	function draw() {
		var h2 = shape.height / 2;
		var w2 = shape.width / 2;
		
		var x = w2;
		var y = h2;
		
		//var corr = resizeCanvas(shape);
		ctx.save();
		ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.translate(75,37.5)
		ctx.translate(x, y);
        console.log('shape.rotation',shape.rotation)
		ctx.rotate(Math.PI / 180 * 15);
		ctx.translate(-x, -y);
		
		ctx.fillStyle = '#000';
		ctx.fillRect(0, 0, shape.width, shape.height);
        ctx.restore();
	}
	

	canvas.addEventListener('click', function() {

		shape.width = shape.width + 15;
		window.requestAnimationFrame(draw.bind(this));
	});

	window.requestAnimationFrame(draw.bind(this));