Always call resizeCanvas

This commit is contained in:
Marcus Moore 2024-11-21 12:38:53 -08:00
parent 2a21cce4f5
commit d0378070c8
No known key found for this signature in database

View file

@ -111,21 +111,20 @@
signaturePad; signaturePad;
// Adjust canvas coordinate space taking into account pixel ratio, // Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices. // to make it look crisp on smaller screens.
// This also causes canvas to be cleared. // https://github.com/szimek/signature_pad#handling-high-dpi-screens
if (window.matchMedia("(min-width: 768px)").matches) { // (This also causes canvas to be cleared.)
function resizeCanvas() { function resizeCanvas() {
// When zoomed out to less than 100%, for some very strange reason, // When zoomed out to less than 100%, for some very strange reason,
// some browsers report devicePixelRatio as less than 1 // some browsers report devicePixelRatio as less than 1
// and only part of the canvas is cleared then. // and only part of the canvas is cleared then.
var ratio = Math.max(window.devicePixelRatio || 1, 1); var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio; canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio; canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio); canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
} }
window.onresize = resizeCanvas;
resizeCanvas();
signaturePad = new SignaturePad(canvas); signaturePad = new SignaturePad(canvas);
@ -144,4 +143,4 @@
</script> </script>
@stop @stop