JSFiddle - React, Tailwind, and code Playground

by Gregor Z.

HTML

<canvas id="canvas" width=524 height=295></canvas><br>
<button id="clockwise">Rotate right</button>
<button id="counterclockwise">Rotate left</button>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

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

var angleInDegrees=0;

var image=document.createElement("img");
image.onload=function(){
    
    ctx.drawImage(image,canvas.width/2,canvas.height/2);
}
image.src="https://vignette.wikia.nocookie.net/superjail/images/4/4e/Jared_%28S4%29.png/revision/latest?cb=20150414124446";

$("#clockwise").click(function(){ 
    angleInDegrees+=90;
    drawRotated(angleInDegrees);
});

$("#counterclockwise").click(function(){ 
    angleInDegrees-=90;
    drawRotated(angleInDegrees);
});

function drawRotated(degrees){
		if (degrees === 90) {
    	var temp = canvas.width;
      canvas.width = canvas.height;
      canvas.height = temp;
    }

    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(canvas.width/2,canvas.height/2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-image.width/2,-image.height/2);
    ctx.restore();
}