Use cases legitime pentru signature pad
GDPR consent explicit pentru date sensibile (medical, biometric); Acceptări termen și condiții pentru cursuri pre-plătite; Confirmare ridicare comandă (curier dropoff acknowledgment); Cerere coaching/consultanță cu acceptarea politicii anulare; Voluntariat ONG cu acceptarea code of conduct. Signature pad NU înlocuiește semnătura electronică calificată (eIDAS QES) — pentru contracte juridice cu valoare mare (>10k EUR sau imobiliare), recomandăm integrare separată DocuSign/Adobe Sign via webhook.
Cum funcționează tehnic — canvas HTML5
Câmp signature randează un `<canvas>` cu event listeners pentru pointer (mouse + touch unified API). Stroke captured ca array de coordonate (x,y,t) — t = timestamp millisecond per point pentru smooth curve interpolation (Bezier). Undo functions prin step-back în array. Clear = reset complet. La submit, canvas se exportă ca PNG (lossless) sau JPEG (compressed, smaller). PNG/JPEG signed cu HMAC server-side pentru audit (preveni post-hoc tampering).
// Capture stroke points
canvas.addEventListener('pointermove', (e) => {
if (!drawing) return;
const rect = canvas.getBoundingClientRect();
points.push({ x: e.clientX - rect.left, y: e.clientY - rect.top, t: Date.now() });
ctx.lineTo(...);
});
// Export as signed JPEG
const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
const signature = { image: dataUrl, points, signedAt: new Date().toISOString() };Metadata pentru audit
Fiecare semnătură captează automat: timestamp ISO 8601 UTC, IP address respondent, User-Agent browser, geolocation country (din IP), hash MD5 al imaginii pentru integrity check. Aceste metadata se salvează încriptate în submission JSON. Pentru contestări post-fact (utilizator zice «nu eu am semnat»), audit trail-ul oferă proof of timestamp + IP + device.
Touch optimization pentru mobile
Pe mobile, canvas-ul ocupă 80% viewport width × 200px height pentru spațiu confortabil de semnat cu degetul. Pinch-zoom dezactivat pe canvas pentru a evita conflict accidental. Pressure sensitivity nu e folosit (inconsistent cross-device); stroke width = 2px uniform pentru consistency.
Plan availability
Signature field disponibil pe toate planurile plătite (Pro+). Free tier nu include pentru a evita abuz în contexte care necesită audit legal (recomandăm Pro pentru orice use case real). Max 3 signature fields per formular.