document.addEventListener('DOMContentLoaded', function () {
const canvas = document.getElementById('signature-pad');
const context = canvas.getContext('2d');
const clearButton = document.getElementById('clear-signature');
const signatureInput = document.getElementById('signature');
let drawing = false;
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
clearButton.addEventListener('click', clearCanvas);
function startDrawing(event) {
drawing = true;
context.beginPath();
context.moveTo(event.offsetX, event.offsetY);
}
function draw(event) {
if (!drawing) return;
context.lineTo(event.offsetX, event.offsetY);
context.stroke();
}
function stopDrawing() {
drawing = false;
saveSignature();
}
function clearCanvas() {
context.clearRect(0, 0, canvas.width, canvas.height);
signatureInput.value = '';
}
function saveSignature() {
signatureInput.value = canvas.toDataURL();
}
});
