I want to capture naviagted map image using html2canvas but it is not showing map other images are shown

See more:

ASP.NET

Javascript

HTML

jQuery

I want to capture Navigated Map image But It is not working
for other images it is working fine.

What I have tried:

Js code is as follows

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <%-- <script src="../jquery-1.7.1.min.js"></script>--%>
    <script src="../jquery-1.7.1.min.js"></script>

    <script src="../js/html2canvas.js"></script>
    <script src="../js/base64.js"></script>

    <script src="../js/canvas2image.js"></script>


    <script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>


    <script type="text/javascript">
        $(function () {
            $("#btnSave").click(function () {

                debugger
                html2canvas($("#widget"), {
                    useCORS: true,
                    allowTaint: true,
                    onrendered: function (canvas) {
                        theCanvas = canvas;
                        document.body.appendChild(canvas);

                        // Convert and download as image 
                        Canvas2Image.saveAsPNG(canvas);
                        $("#img-out").append(canvas);
                        // Clean up 
                        //document.body.removeChild(canvas);
                    }
                });

                //html2canvas($('#map'), {
                //    useCORS: true,
                //    allowTaint: true,
                //    onrendered: function (canvas) {
                //        document.body.appendChild(canvas);
                //    }
                //});
            });
        });
    </script>

</asp:Content>

Asp .net Code is as follows

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link href="../css/NewStyleSheet.css" rel="stylesheet" />

    <span id="widget" class="widget" field="AGE" roundby="20" description="Patient age, in years">
        <div class="header ng-scope" id="map">
            <div class="title ng-binding">AGE</div>
            <p class="ng-binding">Patient age, in years</p>
          
<%-- Here passing Url of map whose Image Has to Capture--%>


        <div class="element ng-scope">
            <div class="content">
                
                                            <!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort -->
                                                    <!---->
                                                    <!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort -->
                                                    <!---->
                                                    <!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort -->
                                                    <!---->
                                                    <!-- end ngRepeat: rowKey in table.rowKeys | orderBy:elementRowSort -->
                        <table class="ng-pristine ng-valid"><colgroup>                        <col>                        <col width="60x">                        <col width="100px">                    </colgroup>                    <thead>                        <tr>                            <th class="cell value">Value</th>                            <th class="cell freq">Freq</th>                            <th class="cell value"></th>                        </tr>                    </thead>                    <tbody>                        <tr class="selectable ng-scope">                            <td class="cell value"><span class="ng-scope ng-binding">0 to 19</span>
                            </td>                            <td class="cell freq ng-binding">17.2%</td>                            <td class="cell glyph">                                <span class="bar bar-both" style="width: 17.234468937875754%"></span>
                                <span class="bar bar-fg" style="width: 0%"></span>
                                <span class="bar bar-bg" style="width: 0%"></span>
                            </td>                        </tr>                        <tr class="selectable ng-scope">                            <td class="cell value"><span class="ng-scope ng-binding">20 to 39</span>
                            </td>                            <td class="cell freq ng-binding">18.0%</td>                            <td class="cell glyph">                                <span class="bar bar-both" style="width: 18.03607214428858%"></span>
                                <span class="bar bar-fg" style="width: 0%"></span>
                                <span class="bar bar-bg" style="width: 0%"></span>
                            </td>                        </tr><tr class="selectable ng-scope">                            <td class="cell value"><span class="ng-scope ng-binding">40 to 59</span>
                            </td><td>{{table.getRowPercent('current', rowKey) | percent}}</td><td class="cell freq ng-binding">34.3%</td>                            <td class="cell glyph">                                <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2"></div>-->
                                <span class="bar bar-both" style="width: 34.2685370741483%"></span>
                                <span class="bar bar-fg" style="width: 0%"></span>
                                <span class="bar bar-bg" style="width: 0%"></span>
                            </td>                        </tr><tr class="selectable ng-scope">                            <td class="cell value"><span class="ng-scope ng-binding">60 to 79</span>
                            </td><td>{{table.getRowPercent('current', rowKey) | percent}}</td><td class="cell freq ng-binding">24.0%</td>                            <td class="cell glyph">                                <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2"></div>-->
                                <span class="bar bar-both" style="width: 24.04809619238477%"></span>
                                <span class="bar bar-fg" style="width: 0%"></span>
                                <span class="bar bar-bg" style="width: 0%"></span>
                            </td>                        </tr><tr class="selectable ng-scope">                            <td class="cell value"><span class="ng-scope ng-binding">80 to 99</span>
                            </td><td>{{table.getRowPercent('current', rowKey) | percent}}</td><td class="cell freq ng-binding">6.4%</td>                            <td class="cell glyph">                                <!--<div class="bar bar-both" style="width: {{(row.current.pct * 100)||2"></div>-->
                                <span class="bar bar-both" style="width: 6.4128256513026045%"></span>
                                <span class="bar bar-fg" style="width: 0%"></span>
                                <span class="bar bar-bg" style="width: 0%"></span>
                            </td>                        </tr><tr class="">                            <td class="stat">Mean</td>                            <td class="ng-binding">46.1</td>                        </tr>                    </tbody>                </table>
            </div>


        </div>
        <!-- ngRepeat: field in getChildren(field) -->
    
    <br>
    

    <div id="img-out"></div>

Please Provide Solutions