I am using the below code to render an image/take a screenshot using html2canvas and attaching the image to a record. The functionality is, When i click on the take screenshot button I need the screenshot of the current form. The am facing three issues here:

1. I see the image rendering is slow approx about 30/50 seconds and then i get the image poped-up.
2. The table on the form is overlapped with the header of the form in the image.
3. I see the attachment is added twice. That is the when i click on the take screenshot button the same screenshot is getting added twice to the target record.

I am using this functionality in ServiceNow UI Builder application. The button component added to the form is in shadowDOM and i am creating a OnLoad script when the form initially loads to get the html2canvas loaded and then calling another script when i click the form button to get the screenshot functionality working.

OnLoad Script:

var script = this.document.createElement('script');
        var that = this;
        script.onload = function() {
            console.log("html2canvas: " + that.html2canvas);
        };
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
        this.document.head.appendChild(script);

OnClick Script:

this.html2canvas(this.document.body).then((canvas) => {

            var dataURL = canvas.toDataURL("image/png");
            console.log("dataURL: " + dataURL);

        });