// Variables for Canvas and Tools
const canvas = document.getElementById('coloringCanvas');
const ctx = canvas.getContext('2d');
const colorPicker = document.getElementById('colorPicker');
const brushSize = document.getElementById('brushSize');
const clearButton = document.getElementById('clearButton');

let painting = false;

// Set canvas dimensions
canvas.width = 800;
canvas.height = 600;

// Load and draw the SVG outline
const svgImage = new Image();
svgImage.src = './assets/love-theory-logo.svg';
svgImage.onload = () => {
    ctx.drawImage(svgImage, 0, 0, canvas.width, canvas.height);
};

// Event Listeners
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mousemove', draw);
clearButton.addEventListener('click', clearCanvas);

// Functions
function startPosition(e) {
    painting = true;
    draw(e); // Draw dot for clicks
}

function endPosition() {
    painting = false;
    ctx.beginPath(); // Reset path
}

function draw(e) {
    if (!painting) return;

    ctx.lineWidth = brushSize.value;
    ctx.lineCap = 'round';
    ctx.strokeStyle = colorPicker.value;

    // Get mouse position relative to canvas
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // Draw
    ctx.lineTo(x, y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x, y);
}

function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(svgImage, 0, 0, canvas.width, canvas.height); // Redraw SVG
}
