JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas><br>
<button id="clockwise">Rotate right</button>
<button id="counterclockwise">Rotate left</button>

CSS

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

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=0;
var height=0;
var diagonal = 0;
var angleInDegrees=0;
var image=document.createElement("img");
image.onload=function(){
	width = image.naturalWidth;
  height = image.naturalHeight;
 diagonal=Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
   ctx.canvas.height = diagonal;
  ctx.canvas.width = diagonal;
  ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(diagonal/2,diagonal/2);
    ctx.rotate(0*Math.PI/180);
    ctx.drawImage(image,-width/2,-height/2);
    ctx.restore();
}
image.src="http://i.imgur.com/gwlPu.jpg";

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

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

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