Convert html content into image using jquery

Question

Below My code....My code is perfectly working but one issue.. Background images is not working How to set Background Images

<script type="text/javascript">
function CreateFrame(emailFrame, Desc) {
$("#lblFrameEmail").text(emailFrame);
$("#lblFrameDesc").text(Desc);
var frameHtml = $("#test").html();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" id="test" style="height:400px;width:600px;">' +
'<img src="http://localhost:2359/Assets/img/FeedbackBack.png" />'+
'<label style="padding-left:218px;padding-top:26px;font-size:23px;position:absolute;right: 33%;top: -7.5%;margin-top: 30px;" id="lblFrameEmail"> [email protected]</label>' +
'<h3 style="padding-left:40px;padding-top:55px;padding-right:55px;font-family:Lucida Calligraphy;color:#080505;position: absolute;top: 30px;margin-top: 30px;" id="lblFrameDesc">The person who sent a feedback can only reply when the recipient has given a reply on that feedback at least once.When new response on old feedback is received, move the feedback on top of the list and highlight the subject line (Similar to new “Feedback Received” event).</h3>'+
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], { type: 'image/svg+xml' });
var url = DOMURL.createObjectURL(svg);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url
$("#imgFrame").attr("src", url);
}
</script>