HTML2Canvas

Not Rendering properly

HTML

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<input type="button" id="export" value="Export" />
<svg id="aaa" width="300" height="150" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x="162" text-anchor="middle" class="highcharts-title" zindex="4" style="color:#333333;font-size:18px;font-weight:normal;text-decoration:normal;font-family:Lucida Grande,Lucida Sans Unicode, Arial, Helvetica, sans-serif;visibility:visible;fill:#333333;width:260px;" y="25">Inventory</text>
</svg>
<canvas id="canvas1" width="300" height="150"></canvas>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

$(document).ready(function () {
    $('#export').on('click', function () {
        // TODO
        var can = document.getElementById('canvas1');
        var ctx = can.getContext('2d');
        var img = new Image();
        var svg = document.getElementById('aaa');
        var xml = (new XMLSerializer).serializeToString(svg);
        img.src = "data:image/svg+xml;charset=utf-8,"+xml;
        
        ctx.drawImage(img, 0, 0);

    });
});