document.addEventListener("DOMContentLoaded", function () {
const canvas = document.getElementById("signature-pad");
const ctx = canvas.getContext("2d");
const signatureData = document.getElementById("signature-data");
function resizeCanvas() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
resizeCanvas();
let drawing = false;
function getPosition(event) {
const rect = canvas.getBoundingClientRect();
return {
x: (event.clientX || event.touches[0].clientX) - rect.left,
y: (event.clientY || event.touches[0].clientY) - rect.top,
};
}
function startDrawing(event) {
event.preventDefault();
drawing = true;
const pos = getPosition(event);
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
}
function draw(event) {
if (!drawing) return;
event.preventDefault();
const pos = getPosition(event);
ctx.lineTo(pos.x, pos.y);
ctx.stroke();
}
function stopDrawing() {
drawing = false;
signatureData.value = canvas.toDataURL("image/png");
}
function clearSignature() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
signatureData.value = "";
}
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseleave", stopDrawing);
canvas.addEventListener("touchstart", startDrawing);
canvas.addEventListener("touchmove", draw);
canvas.addEventListener("touchend", stopDrawing);
window.clearSignature = clearSignature;
});
