JSFiddle - React, Tailwind, and code Playground

HTML

<div id="InteractiveMap" class="InteractiveMap">
  <img id="source" src="https://cs-nonsteam.ru/uploads/posts/2019-10/1572063470_bezymjannyj.jpg">
</div>
<canvas id="canvas"></canvas>

CSS

.InteractiveMap {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
    width: 800px;
    height: 400px;
}

canvas {
  position: absolute;
   top: 600px;
   left:0;
}

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');
let points = [];


const el = document.getElementById("InteractiveMap");
el.addEventListener("click", (e) => {
	
  if(points.length < 2) {
     points.push({x: e.clientX, y: e.clientY});
  }
  
    if(points.length == 2) {
   
           const leftTopPoint = points[0];
           const rightBottomPoint = points[1];

           const width = rightBottomPoint.x - leftTopPoint.x;
           const height = rightBottomPoint.y - leftTopPoint.y;

           ctx.drawImage(image, leftTopPoint.x, leftTopPoint.y, width, height, 0, 0, width, height);
           
            var newImg = document.createElement("img");
            var url = canvas.toDataURL();
      			newImg.src = url;
      			document.body.appendChild(newImg);

     
     
     }
   
});