JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="300" height="300"></canvas>

CSS

canvas {border:1px solid red;}

JavaScript

function getRadianAngle(degreeValue) {
    return degreeValue * Math.PI / 180;
} 

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 200;
var rectHeight = 100;
var rotateBy = 45;

 context.translate(canvas.width/2, canvas.height/2);
 context.rotate(getRadianAngle(rotateBy));
 context.beginPath();

 context.rect(-(rectWidth/2), -(rectHeight/2), rectWidth, rectHeight);
 context.fillStyle = 'yellow';
 context.fill();
 context.lineWidth = 7;
 context.strokeStyle = 'black';
 context.stroke();