JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" width=500px height=400px>
    <svg class="svg-editor" id="myViewer" width="1400" height="1400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" style="overflow:scroll;margin:0;">
                <g id="base" name="base" class="svg-editor-layer"><title>base</title><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="200" x2="400" y1="200" x1="200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="200" x2="600" y1="200" x1="500"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="200" x2="1200" y1="200" x1="800"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="300" x2="1200" y1="200" x1="1200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="705" x2="1200" y1="400" x1="1200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="950" x2="1200" y1="795" x1="1200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="1200" x2="1200" y1="1050" x1="1200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="1200" x2="1050" y1="1200" x1="1200"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="1200" x2="750" y1="1200" x1="950"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="1200" x2="450" y1="1200" x1="650"></line><line stroke="#000000" stroke-width="12" stroke-dasharray="none" class="line" pattern="none" transform="" y2="1200" x2="200" y1="1200" x1="350"></line><line stroke="#000000"...

JavaScript

$("body").on("click","#button",function(){
    convertToPng();
});

function convertToPng(){
    var svgText = $("#myViewer").outerHTML;
    var myCanvas = document.getElementById("canvas");
    var ctxt = myCanvas.getContext("2d");
    console.log("conversion...");
}