JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

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

var degrees=0;

var image=document.createElement("img");
image.onload=function(){
    canvas.width = image.width;
    canvas.height = image.height;    
    ctx.drawImage(image,0,0);
}
image.src="http://www.ajaxblender.com/article-sources/images/plane-1.jpg";


 $("#clockwise").click(function(){
     degrees+=90
     if (degrees >= 360) degrees = 0;
     
     if (degrees === 0 || degrees === 180 ) {
         canvas.width = image.width;
         canvas.height = image.height;
     }
     else {
         // swap
         canvas.width = image.height;
         canvas.height = image.width;
     }
  ctx.save();
  // you want to rotate around center of canvas
  ctx.translate(canvas.width/2,canvas.height/2);
    
  ctx.rotate(degrees*Math.PI/180);
  ctx.drawImage(image, -image.width*0.5, -image.height*0.5);
  ctx.restore();
});