Preparing your dream home experience...
Dream Catcher Realty Website
Sign Here: Clear Signature document.addEventListener("DOMContentLoaded", function() { // Updated to match your exact hidden field name attribute const hiddenFieldName = 'hidden'; const canvas = document.getElementById('customSigCanvas'); const ctx = canvas.getContext('2d'); const clearBtn = document.getElementById('clearSigBtn'); const form = canvas.closest('form'); let isDrawing = false; // Adjust canvas resolution dynamically for width canvas.width = canvas.offsetWidth; // Set line styling ctx.strokeStyle = "#000000"; ctx.lineWidth = 2; // Drawing event listeners function getMousePos(e) { const rect = canvas.getBoundingClientRect(); return { x: (e.clientX || e.touches[0].clientX) - rect.left, y: (e.clientY || e.touches[0].clientY) - rect.top }; } function startDrawing(e) { isDrawing = true; const pos = getMousePos(e); ctx.beginPath(); ctx.moveTo(pos.x, pos.y); e.preventDefault(); } function draw(e) { if (!isDrawing) return; const pos = getMousePos(e); ctx.lineTo(pos.x, pos.y); ctx.stroke(); e.preventDefault(); } function stopDrawing() { isDrawing = false; } // Mouse & Touch Support canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); window.addEventListener('mouseup', stopDrawing); canvas.addEventListener('touchstart', startDrawing, {passive: false}); canvas.addEventListener('touchmove', draw, {passive: false}); window.addEventListener('touchend', stopDrawing); // Clear Button clearBtn.addEventListener('click', function() { ctx.clearRect(0, 0, canvas.width, canvas.height); const hiddenInput = form.querySelector(`[name="${hiddenFieldName}"]`); if(hiddenInput) hiddenInput.value = ''; }); // Intercept form submission to save the canvas data form.addEventListener('submit', function() { const hiddenInput = form.querySelector(`[name="${hiddenFieldName}"]`); if (hiddenInput) { // Converts the drawing into a base64 image string hiddenInput.value = canvas.toDataURL(); } }); });
