let desenhando = false;
const canvas = document.getElementById('assinaturaCanvas');
const ctx = canvas.getContext('2d');
// Configuração inicial
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = '#000000';
ctx.lineWidth = 2;
// Eventos para capturar o desenho
canvas.addEventListener('mousedown', iniciarDesenho);
canvas.addEventListener('mouseup', pararDesenho);
canvas.addEventListener('mouseleave', pararDesenho);
canvas.addEventListener('mousemove', desenhar);
// Para dispositivos touch
canvas.addEventListener('touchstart', iniciarDesenho);
canvas.addEventListener('touchend', pararDesenho);
canvas.addEventListener('touchcancel', pararDesenho);
canvas.addEventListener('touchmove', desenharTouch);
function iniciarDesenho(e) {
desenhando = true;
desenhar(e);
e.preventDefault(); // Prevenir scroll em dispositivos touch
}
function pararDesenho() {
desenhando = false;
ctx.beginPath();
// Salvar a assinatura como dados base64
salvarAssinatura();
}
function desenhar(e) {
if (!desenhando) return;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
function desenharTouch(e) {
if (!desenhando) return;
const rect = canvas.getBoundingClientRect();
const touch = e.touches[0];
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
e.preventDefault(); // Prevenir scroll
}
function limparAssinatura() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
document.getElementById('assinaturaData').value = '';
}
function salvarAssinatura() {
document.getElementById('assinaturaData').value = canvas.toDataURL('image/png');
}