How to export Jchartfx svg chart to canvas

I tried to export jchartfx to canvas using html2canvas.js but it only converts other attributes into canvas but svg element is displayed as blank area. here is my code.

 <%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Using an existing canvas to draw on</title>
        <style>
            canvas {
                border: 1px solid black;
            }
            button {
                clear: both;
                display: block;
            }
            #content {
                background: rgba(100, 255, 255, 0.5);
                padding: 50px 10px;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/jchartfx.attributes.css" />
    <link rel="stylesheet" type="text/css" href="css/jchartfx.palette.css" />

    <script type="text/javascript" src="./js/jchartfx/jchartfx.system.js"></script>
    <script type="text/javascript" src="./js/jchartfx/jchartfx.coreVector.js"></script>
    <script type="text/javascript" src="./js/jchartfx/jchartfx.advanced.js"></script>


    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/exportLibrary.js"></script>


    <style>
    .exportChart{}
    .exportTable{max-width:700px;border:1px solid blue; margin:2px;}
    </style>
    <script type="text/javascript" >

        var chart1;

        function loadChart(){        

              chart1 = new cfx.Chart();

              chart1.setGallery(cfx.Gallery.Pie);
              var title;
              title = new cfx.TitleDockable();
              title.setText("Sample Demo");
              chart1.getTitles().add(title);
              var divHolder = document.getElementById('ChartDiv1');
              PopulateCarProduction(chart1);
              chart1.create(divHolder);


          }

    function PopulateCarProduction(chart) {
            var items = [{
                "Proportion": 70,
                "Month": "Jan"
            }, {
                "Proportion": 30,
                "Month": "Feb"
            }];


            chart.setDataSource(items);
        }
    </script>

    </head>
    <body onload="loadChart()">
    <div><h1>HTML content to render:</h1>
        <div id="content">
        <div class="exportChart" id="ChartDiv1" style="width:600px;height:400px"></div>

    <div class="exportTable" id="TableDiv1" style="width:600px;">
    <table id="table1" >
    <tr><th style="color:#f0f">1Column one</th><th>Column Two</th><th>Column one</th><th>Column Two</th><th>Column Two</th></tr>
    <tr><td>Data11</td><td>Data12</td><td>Data11</td><td>Data12</td><td>Data12</td></tr>
    <tr><td> Data21</td><td>Data22 </td><td> Data21</td><td>Data22 </td><td>Data22 </td></tr>
    <tr><td> Data31</td><td>Data32 </td><td> Data31</td><td>Data32 </td><td>Data32 </td></tr>
    </table>
    </div>
    </div>
    </div>
    <h1>Existing canvas:</h1>
    <canvas width="1000" height="800"></canvas>
    <script type="text/javascript" src="tableexport/html2canvas.js"></script>
    <button>Run html2canvas</button>
    <script type="text/javascript">
        var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");



        document.querySelector("button").addEventListener("click", function() {
            html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
                console.log('Drew on the existing canvas');
            });
        }, false);

    </script>
    </body>
    </html>

The table is converted into canvas but svg is not converted. i need to convert svg to canvas with styles.

Here is the generated output. Output screen

Solution

It's due to security constraints. If a SVG contains any external references (foreignObject such as image data, css etc.) the browser will not allow the SVG to be drawn.

For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:

External resources (e.g. images, stylesheets) cannot be loaded, though they can be used if inlined through BlobBuilder [Blob] object URLs or data: URIs.

[...]

Note that the above restrictions are specific to image contexts; they don't apply when SVG content is viewed directly, or when it's embedded as a document via the <iframe>, <object>, or <embed> elements.

Source

You could always save the SVG itself as an image, or if an absolute requirement, parse it using for example a library such as canvg.