JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

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(){
    ctx.drawImage(image,0,0,image.width,image.height);
}
image.src="https://s3-eu-west-1.amazonaws.com/static.melkweg.nl/uploads/images/scaled/event_header/21747";


 $("#clockwise").click(function(){
     degrees+=90
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.save();
  ctx.translate(image.width/2,image.height/2);
    
  ctx.rotate(degrees*Math.PI/180);
  ctx.drawImage(image,0,0,image.width,image.height,-image.width/2,-image.height/2,image.width,image.height);
  ctx.restore();
});