JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>
<br /><br />
Rotate: <input type="range" onchange="getDegrees(this.value);" value="45" min="0" max="360" />
<span id="displayDeg"></span> degrees

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = 250;
canvas.height = 250;

var cx = canvas.width/2;
var cy = canvas.height/2;

var x = -50;
var y = -50;
var w = 100;
var h = 100;
var deg = 45;

var displayDeg = document.getElementById("displayDeg");

function clear() {
    ctx.save();
    
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.restore();
}

function renderSquare() {
    displayDeg.innerHTML = deg; // print the degrees on to screen
    
    ctx.save();
    
    ctx.translate(cx, cy); // pivot point
    ctx.rotate(deg * Math.PI/180); // rotate square in radians
    
    ctx.fillRect(x, y, w, h);
    
    ctx.restore();
}

function getDegrees(theta) {
    deg = theta;
    clear();
    renderSquare();
}

renderSquare(); // initialise