// JavaScript Document


document.addEventListener("DOMContentLoaded", function () {

    console.log("DOM Loaded. Signature script loaded")

    const canvas = document.getElementById('signatureCanvas');
    const ctx = canvas.getContext('2d');
    let drawing = false;

    // Function to get the canvas offset
    function getCanvasOffset() {
        const rect = canvas.getBoundingClientRect();
        console.log("offsetX:", rect.left, " OffsetY:", rect.top)
        return {
            offsetX: rect.left,
            offsetY: rect.top
        };
    }

    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function startDrawing(e) {
        console.log("Start Drawing")
        drawing = true;
        draw(e);
    }

    function endDrawing() {
        console.log("Stopped Drawing")
        drawing = false;
        ctx.beginPath();
    }

    function draw(e) {
        console.log(e)
        if (!drawing) return;
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        ctx.strokeStyle = '#000';

        let x = e.clientX - canvas.offsetLeft;
        let y = e.clientY - canvas.offsetTop;
        console.log("X:", x, " Y:", y)
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(x, y);
    }

    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mouseup', endDrawing);
    canvas.addEventListener('mousemove', draw);

    canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
    canvas.addEventListener('touchend', endDrawing);
    canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));

})