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="example">Lorem ipsum</div>

<div class="bug-container hide">
  <img width="75%" class="screen" >
</div>

</body>

CSS

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

.hide {
  display: none;
}

.example {
  height: 100px;
  background: yellow;
}

JavaScript

let q = s => document.querySelector(s);

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 = q(".screen");
    let c = q(".bug-container");
    c.classList.remove('hide')
    img.src = screenshot; 
    // ... show screenshot to user, allow to draw region
    // and send screnshot with region coordinates to server 
}