JSFiddle - React, Tailwind, and code Playground

HTML

<body>
</body>

JavaScript

var newCanvas = document.createElement('canvas');
newCanvas.height="175";
newCanvas.width="175";
newCanvas.style.border="1px solid black";
document.body.appendChild(newCanvas);

var imgObj=new Image();
imgObj.src='https://twimg0-a.akamaihd.net/profile_images/2706237144/17d8e55d114ea20e87abffb6ebcc25f3.png';
var width=imgObj.width;
var height=imgObj.height;

var angleToRotate = 30 * Math.PI / 180;

var requiredCanvasHeight = Math.sin(angleToRotate)*width+Math.cos(angleToRotate)*height;
var requiredCanvasWidth = Math.sin(angleToRotate)*height+Math.cos(angleToRotate)*width;
newCanvas.height=Math.ceil(requiredCanvasHeight);
newCanvas.width=Math.ceil(requiredCanvasWidth);
    
$(imgObj).load(function() {
    var context = newCanvas.getContext('2d');

    context.clearRect(0, 0, newCanvas.width, newCanvas.height);

    var rad = angleToRotate;
    // context.moveTo(50,50);
    context.translate(0 + width / 2, 0);// + height / 2);

    context.rotate(rad);

    //draw the image    
    //context.drawImage(imgObj,width / 2 * (-1),height / 2 * (-1),width,height);
    context.drawImage(imgObj, 0, 0, width, height);

    //reset the canvas  
    context.rotate(rad * ( -1 ) );
    context.translate((0 + width / 2) * (-1), (0 + height / 2) * (-1));
});

console.info(imgObj);