JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script src="https://raw.github.com/brinley/jSignature/master/libs/jSignature.min.js"></script>
<div id="signature"></div>
        <canvas id="canvas" hidden="hidden"></canvas>
        <br />
        <button id="save">Save</button>
        <button id="clear">Clear</button>
        <br /><br />
        <fieldset id="outputSvg" style="float:left">
          <legend>SVG</legend>
        </fieldset>
        <form id="form" name="form" method="post" action="submit_signature.php" enctype="multipart/form-data">
          <fieldset id="outputRaster" style="float:left">
            <legend>Raster</legend>
          </fieldset>
          <input type="submit" />
        </form>

JavaScript

$(document).ready(function(){
            var sigdiv = $("#signature").jSignature({'UndoButton':true});
            
            $("#lock").click(function(){
              //Lock the canvas, stop user input
            });
            
            $("#save").click(function(){
              var datapair = sigdiv.jSignature("getData", "svg");
              var i = new Image();
              i.src = "data:" + datapair[0] + "," + datapair[1];
              $(i).appendTo($("#outputSvg"));
              
              var canvas = document.getElementById("canvas");

              canvg(canvas, datapair[1]);
              
              var img = canvas.toDataURL("image/png");
              $("#outputRaster").append("<img src='"+img+"' />");
            });
            
            $("#clear").click(function(){
              sigdiv.jSignature("reset");
              $("#outputSvg, #outputRaster").empty();
            });
          });