SignaturePad aspect ratio bug

by HugeHugh

HTML

<script src="https://szimek.github.io/signature_pad/js/signature_pad.umd.js"></script>
<canvas id="signature-pad" width="400" height="200"></canvas>
<div>
<ol>
<li>Draw a signature that takes up the entire canvas, and gets near each edge</li>
<li>Press Export button</li>
<li>Notice the signature is clipped in the img preview</li>
<li>Press "Solve It" button to overwrite _toSVG() routine of SignaturePad</li>
<li>Press Export button again</li>
<li>Notice the signature now looks correct because window.devicePixelRatio was hardwired to 1</li>
</ol>
</div>
<button type="button" id="export">
Export
</button>
<div>
<img id="result">
</div>
<button type="button" id="solve">
Solve it!
</button>

CSS

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

JavaScript

var canvas = document.getElementById('signature-pad');
var exportButton = document.getElementById('export');
var img = document.getElementById('result');
var solveButton = document.getElementById('solve');

// 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;
// when using devicePixelRatio, the size is correct, but the drawing is inaccurate, see #514 https://github.com/szimek/signature_pad/issues/514
// resizeCanvas();

var signaturePad = new SignaturePad(canvas);


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


// solve button is gonna overwrite private _toSVG() method of SignaturePad and hardcode DPR to 1
solveButton.addEventListener('click', () => {
SignaturePad.prototype['_toSVG'] = function _toSVG() {
    const pointGroups = this._data;
    const ratio = 1; // Math.max(window.devicePixelRatio || 1, 1);	 don't consider window.devicePixelRatio and all works fine
    const minX = 0;
    const minY = 0;
    const maxX = this.canvas.width / ratio;
    const maxY = this.canvas.height / ratio;
    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', this.canvas.width.toString());
    svg.setAttribute('height', this.canvas.height.toString());
    this._fromData(
        pointGroups,
        ({ color, curve }) => {
            const path = document.createElement('path');
            if...