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>
When window.devicePixelRatio is not 1, the cursor position is inaccurate.
</div>

CSS

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

JavaScript

var canvas = document.getElementById('signature-pad');

// 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);