JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<img id="img" src="https://i.imgur.com/okSIKkW.jpg">
<canvas id="c1" height="200" width="200"></canvas>

CSS

#img { display: none; }
#c1 { border: 1px solid green; }
#c2 { border: 1px solid blue; }

JavaScript

const c1 = document.getElementById("c1");
const ctx1 = c1.getContext("2d");

const drawImage = () => {
	ctx1.drawImage(document.getElementById("img"), 0, 0);
}

const drawSelection = (e) => {
	ctx1.strokeStyle = "#000";
  ctx1.beginPath();
  ctx1.rect(origin.x, origin.y, e.offsetX - origin.x, e.offsetY - origin.y); 
  ctx1.stroke();
};

const clear = () => {
  ctx1.strokeStyle = "#fff";
  ctx1.clearRect(0, 0, c1.width, c1.height);
};

const render = (e) => {
	clear();
	drawImage();
    
  if (origin) drawSelection(e);
}

window.onload = drawImage;

let origin = null;
c1.onmousedown = e => { origin = {x: e.offsetX, y: e.offsetY}; };
c1.onmouseup = e => { origin = null; render(e); };
c1.onmousemove = render;