JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<body>
<div>Screenshot tester</div>
<button onclick="report()">Take screenshot</button>

<div class="container">
  <img width="75%" class="screen" >
</div>
</body>

CSS

.container {
    margin-top: 10px; 
    border: solid 1px black;
 
}

JavaScript

async function  makeScreenshot(selector="body") 
{
  return new Promise((resolve, reject) => {  
    let node = document.querySelector(selector);
    
    html2canvas(node, { onrendered: (canvas) => {
        let pngUrl = canvas.toDataURL();      
        resolve(pngUrl);
    }});  
  });
}

async function report() {
    let screenshot = await makeScreenshot(); // png dataUrl
    let img = document.querySelector(".screen");
    img.src = screenshot; 
    // ... show screenshot to user, allow to draw region
    // and send screnshot with region coordinates to server 
}