I am using bootstrap and an implementation of a signature pad from [https://github.com/szimek/signature_pad][1]
The problem is, each time I call the modal to capture a signature the modal (and signature-pad canvas) gets larger each time its called. Here is the css/html and code I have :
#sig-wrapper {
width: 100%;
height: auto;
position: relative;
background-color: #f8f9fa; /* Light grey background color for the signature area */
border: 1px solid #ced4da; /* Light grey border for better visibility */
padding: 10px; /* Padding to ensure the canvas doesn't touch the borders directly */
}
#signature-pad {
/*width: 100%;*/
width:100%;
height: auto;
max-width: 100%;
max-height: 100%;
touch-action: none;
user-select: none;
}
div class="modal" id="sigModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="card-header card-header-warning" id="showCustName">
None
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div id ="sig-wrapper">
<canvas id="signature-pad" class="signature-pad"></canvas>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id = "cancelButton" type="button" class="close mr-1" data-dismiss="modal" >Cancel</button>
<button id = "clearButton" type="button" class="btn btn-primary mr-1" >Clear</button>
<button id = "saveBut" type="button" class="btn btn-primary mr-1">Ok</button>
</div>
</div>
</div>
In the doc ready event I initialize the elements:
$(document).ready(function() {
var canvas = document.getElementById('signature-pad'); signaturePad = new SignaturePad(canvas);
function resizeCanvas() {
var canvas = document.getElementById('signature-pad');
var wrapper = document.getElementById('sig-wrapper');
const ratio = Math.max(window.devicePixelRatio || 1, 1);
// Set canvas width and height to wrapper's dimensions
canvas.width = wrapper.clientWidth * ratio;
canvas.height = wrapper.clientHeight * ratio;
// Reset any previous transformations and scale the context
var context = canvas.getContext("2d");
context.setTransform(1, 0, 0, 1, 0, 0);
context.scale(ratio, ratio);
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Clear the signature pad to ensure it's empty
if (signaturePad) {
signaturePad.clear(); // Ensure this does not error if signaturePad is not yet initialized
}
}
// window.addEventListener('resize', resizeCanvas);
$('#sigModal').on('shown.bs.modal', function() {
resizeCanvas();
});
$('#sigModal').on('hidden.bs.modal', function () {
pauseInterval = pauseStatus
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
signaturePad.clear();
});
})
Can anyone please let me know where I am going wrong ? Many thanks.