Capture screenshot with VueJS

I followed the https://www.digitalocean.com/community/tutorials/vuejs-screenshot-ui steps to capture a screenshot using VueJS. The screenshot is taken successfully, but the screenshot dimensions seem not to be correct.

Problem:

• The output should be the screenshot should be the selected one from the cursor. The output and the selected box from the cursor are different.

Issue: -I think, the issue is with the takeScreenshot method

takeScreenshot: function () {
  html2canvas(document.querySelector('body')).then(canvas => {
    let croppedCanvas = document.createElement('canvas'),
        croppedCanvasContext = croppedCanvas.getContext('2d');

    croppedCanvas.width  = this.boxEndWidth;
    croppedCanvas.height = this.boxEndHeight;

    croppedCanvasContext.drawImage(canvas, this.boxLeft, this.boxTop, 
    this.boxEndWidth, this.boxEndHeight, 0, 0, this.boxEndWidth, 
    this.boxEndHeight);

    this.imageUrl = croppedCanvas.toDataURL();
  
    const screenshotImg = document.getElementById('screenshotImg');
  
    screenshotImg.src= this.imageUrl;
    console.log('imageUrl', this.imageUrl)
  });
}

Would love to know if there's a fix or any other better way to take a screenshot. Thank you.

Codepen Link: https://codepen.io/dineshmadanlal/pen/MWjeXBQ

from Capture screenshot with VueJS