JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick='noRotation()'>Normal</button>
<button onclick='rotateRight()'>Rotate Right</button>
<button class='last-button' onclick='flip()'>Upside Down</button>
<button onclick='rotateLeft()'>Rotate Left</button>
<br/>
<canvas id="canvas" width="600" height="650"></canvas>

<div>
  <img id="source" src="https://picsum.photos/200/300" width="200" height="300">
</div>

CSS

canvas {
  border: 1px solid black;
  padding: 0
  margin: 0;
}
div {
  display: none;
}

JavaScript

const canvas = document.getElementById('canvas');
const image = document.getElementById('source');

const Rotation = {
  None: 0,
  Right: 90,
  Flip: 180,
  Left: 270
};

const noRotation = () => 	Rotate(Rotation.None);
const rotateRight = () =>	Rotate(Rotation.Right);
const rotateLeft = () =>  Rotate(Rotation.Left);
const flip = () => Rotate(Rotation.Flip);
const Rotate = (orientation) =>	rotateImage(canvas, image, orientation);

function rotateImage(canvas, image, rotation){
	const rotate =  correctRotation(rotation);
  const context = canvas.getContext('2d');
  
  let offsetX = 0;
  let offsetY = 0;

	let displacementX = canvas.width;
	let displacementY = canvas.height;

  if (rotate === Rotation.Left || rotate === Rotation.Right){
    displacementX = canvas.height;
    displacementY = canvas.width;
  }

  switch(rotate) {
    case Rotation.Flip:
      offsetX = canvas.width;
      offsetY = canvas.height;
      break;

  case Rotation.Left:
      offsetY = canvas.height;
      break;

  case Rotation.Right:
  		offsetX = canvas.width;
      break;
  }
  
	context.setTransform(1, 0, 0, 1, offsetX, offsetY);
  context.rotate(rotate * Math.PI / 180);
	context.drawImage(image, 0,0, displacementX, displacementY )
}

function correctRotation(rotation) {
	return !rotation ? Rotation.None  	
  	: rotation < Rotation.Flip ? Rotation.Right
    : rotation < Rotation.Left ? Rotation.Flip 
    : Rotation.Left;
}

image.addEventListener('load', e => noRotation() );