JSFiddle - React, Tailwind, and code Playground

by RomainMazB

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=new Image();
image.onload=function(){
  	canvas.height = image.height;
  	canvas.width = image.width;
    ctx.drawImage(image,0,0);
}
image.src="https://www.woopets.fr/assets/races/home/berger-australien-227x280.jpg";


 $("#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);
  ctx.restore();
});