SignaturePad export SVG background

by HugeHugh

HTML

<script src="https://szimek.github.io/signature_pad/js/signature_pad.umd.js"></script>
<canvas id="signature-pad"></canvas>
<div>
<ol>
<li>Draw strokes (or not) on the canvas</li>
<li>Press Export PNG button.  Notice the original signature is included in the output</li>
<li>Press Export SVG button.  Notice the original signature is not included in the output</li>
</ol>
</div>
<button type="button" id="exportPNG">
Export PNG
</button>
<button type="button" id="export">
Export SVG
</button>
<div>
<img id="result">
</div>

CSS

body {
  font-family: sans-serif;
  background-color: #eee;
}
canvas, img {
  background-color: white;
  width: 500px;
}

JavaScript

// CORS-friendly img src
var startSig = 'https://i.imgur.com/nQX7nfa.jpg';
var canvas = document.getElementById('signature-pad');
var exportButton = document.getElementById('export');
var exportPNGButton = document.getElementById('exportPNG');
var img = document.getElementById('result');

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

var signaturePad = new SignaturePad(canvas);

// this causes Tainted Canvas
// signaturePad.fromDataURL(startSig);
// fix it by fetch image with CORS Anonymous
taintedCanvasFix(startSig);

async function taintedCanvasFix(src) {
	const safeSrc = await fetchSignature(src);
  signaturePad.fromDataURL(safeSrc);
}

exportButton.addEventListener('click', () => {
	var svg = signaturePad.toDataURL("image/svg+xml");
  if (svg) {
  	img.src = svg;  
  }
}, false);

exportPNGButton.addEventListener('click', () => {
	var png = signaturePad.toDataURL();
  if (png) {
  	img.src = png;
  }
}, false);

// fix of tainted canvas issue.  fetch image with CORS Anonymous, draw it to PNG w/ offscreen canvas
// https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#Security_and_tainted_canvases
function fetchSignature(src) {
  return new Promise((resolve, _reject) => {
    const downloadedImg = new Image();
    downloadedImg.crossOrigin = 'Anonymous';
    downloadedImg.addEventListener(
      'load',
      () => {
        const canvas = document.createElement('canvas');
       ...