JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>
<div id="coupon_td">
                    <table width="100%" cellspacing="0" cellpadding="10" id="coupon_details" style="margin: 0px; background-color: rgb(125, 9, 9); font-family: verdana; font-size: 25px;">
                        <tbody><tr>
                            <td valign="top">
                                <table width="100%" cellspacing="0" cellpadding="0" style="margin: 0px; border: 1px dashed rgb(255, 255, 255); border-radius: 5px 5px 5px 5px;" id="inside_table">
                                    <tbody><tr>
                                        <td width="427" height="50" align="center" style="color: rgb(255, 255, 255);" class="coupon_bg" id="coupon_top">Get 50% OFF</td>
                                    </tr>
                                    <tr>
                                        <td height="140" align="center" style="color: rgb(255, 255, 255);" id="coupon_middle" class="coupon_bg">Now shop with us and</td>
                                    </tr>
                                    <tr>
                                        <td height="50" align="center" style="color: rgb(255, 255, 255);" class="coupon_bg" id="coupon_bottom">Get upto 50% Discount</td>
                                    </tr>
                                </tbody></table>
                            </td>
                        </tr>
                    </tbody></table>
                </div>
<input type="button" value="Convert" onclick="javascript: checkcanvas();" name="convert" id="convert" /> <input type="hidden" name="base_64_img" id="base_64_img" />

<div id="copy_from_hidden">llll</div>

JavaScript

$("#convert").click(function() {

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='437' height='262'>" + "<foreignObject width='100%' height='100%'>" + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" + $("#coupon_td").html() + "</div>" + "</foreignObject>" + "</svg>";

    var DOMURL = self.URL || self.webkitURL || self;
    var img = new Image();
    var svg = new Blob([data], {
        type: "image/svg+xml;charset=utf-8"
    });
    var url = DOMURL.createObjectURL(svg);
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
    };
    img.src = url;

    document.getElementById('base_64_img').value = canvas.toDataURL();

    alert($("#base_64_img").val());

    $("#copy_from_hidden").html($("#base_64_img").val());

});