Image Treasure Finder Tool

function processImage(originalImg, treasureX = "0.75", treasureY = "0.45", effectIntensity = "1") {
    // Parse parameters
    const tX = Math.max(0, Math.min(1, parseFloat(treasureX) || 0.75));
    const tY = Math.max(0, Math.min(1, parseFloat(treasureY) || 0.45));
    const intensity = Math.max(0, Math.min(2, parseFloat(effectIntensity) || 1));

    // Create canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    canvas.width = width;
    canvas.height = height;

    const minDim = Math.min(width, height);

    // Apply vintage map filters and base image
    if (intensity > 0) {
        ctx.filter = `sepia(${intensity * 80}%) contrast(${1 + intensity * 0.2}) brightness(${1 - intensity * 0.1})`;
    }
    ctx.drawImage(originalImg, 0, 0, width, height);
    ctx.filter = 'none';

    if (intensity > 0) {
        // 1. Aged Paper Tint Overlay
        ctx.fillStyle = `rgba(210, 180, 140, ${0.3 * intensity})`;
        ctx.fillRect(0, 0, width, height);

        // 2. Vignette (Dark Burnt Edges)
        const vignette = ctx.createRadialGradient(
            width / 2, height / 2, minDim * 0.3,
            width / 2, height / 2, Math.max(width, height) * 0.7
        );
        vignette.addColorStop(0, 'rgba(0,0,0,0)');
        vignette.addColorStop(1, `rgba(50,20,0,${0.7 * intensity})`);
        ctx.fillStyle = vignette;
        ctx.fillRect(0, 0, width, height);

        // 3. Simulated Map Folds
        const creaseWidth = minDim * 0.003;
        
        // Highlights
        ctx.lineWidth = creaseWidth;
        ctx.strokeStyle = `rgba(255, 255, 255, ${0.15 * intensity})`;
        ctx.beginPath();
        ctx.moveTo(width * 0.33, 0); ctx.lineTo(width * 0.33, height);
        ctx.moveTo(width * 0.66, 0); ctx.lineTo(width * 0.66, height);
        ctx.moveTo(0, height * 0.5); ctx.lineTo(width, height * 0.5);
        ctx.stroke();

        // Shadows
        ctx.strokeStyle = `rgba(0, 0, 0, ${0.1 * intensity})`;
        ctx.beginPath();
        ctx.moveTo(width * 0.33 + creaseWidth, 0); ctx.lineTo(width * 0.33 + creaseWidth, height);
        ctx.moveTo(width * 0.66 + creaseWidth, 0); ctx.lineTo(width * 0.66 + creaseWidth, height);
        ctx.moveTo(0, height * 0.5 + creaseWidth); ctx.lineTo(width, height * 0.5 + creaseWidth);
        ctx.stroke();
    }

    // Coordinates for the starting point and treasure
    const startX = width * 0.1;
    const startY = height * 0.9;
    const targetX = width * tX;
    const targetY = height * tY;

    // 4. Dashed Treasure Path
    ctx.beginPath();
    ctx.setLineDash([minDim * 0.02, minDim * 0.015]);
    ctx.lineWidth = minDim * 0.006;
    ctx.strokeStyle = 'rgba(120, 20, 20, 0.85)';
    ctx.lineCap = 'round';
    ctx.moveTo(startX, startY);
    
    // Create a wavy trail using Bezier curves
    const cp1x = startX + (targetX - startX) * 0.3;
    const cp1y = startY + (targetY - startY) * 0.8;
    const cp2x = startX + (targetX - startX) * 0.7;
    const cp2y = startY + (targetY - startY) * 0.1;
    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, targetX, targetY);
    ctx.stroke();
    ctx.setLineDash([]); // Reset dashed lines

    // 5. Big Red 'X' marks the spot
    const xSize = minDim * 0.04; // Radius of the 'X'
    ctx.lineWidth = minDim * 0.015;
    ctx.strokeStyle = 'rgba(180, 0, 0, 0.9)'; // Bright darkish red
    
    // Hand-drawn slightly offset X
    ctx.beginPath();
    ctx.moveTo(targetX - xSize, targetY - xSize);
    ctx.lineTo(targetX + xSize, targetY + xSize);
    ctx.moveTo(targetX + xSize, targetY - xSize);
    ctx.lineTo(targetX - xSize, targetY + xSize);
    ctx.stroke();

    // Inner shadow/core to the X to make it pop
    ctx.lineWidth = minDim * 0.006;
    ctx.strokeStyle = 'rgba(255, 50, 50, 0.8)';
    ctx.stroke();

    // 6. Compass Decoration (Top border area)
    const compassMargin = minDim * 0.12;
    const cr = minDim * 0.06; // Compass radius
    
    ctx.save();
    ctx.translate(compassMargin, compassMargin);
    
    // Compass outline ring
    ctx.beginPath();
    ctx.arc(0, 0, cr, 0, Math.PI * 2);
    ctx.lineWidth = minDim * 0.005;
    ctx.strokeStyle = 'rgba(60, 40, 20, 0.7)';
    ctx.stroke();
    
    // Compass North Needle (Red)
    ctx.beginPath();
    ctx.moveTo(0, -cr * 1.3);
    ctx.lineTo(cr * 0.25, 0);
    ctx.lineTo(-cr * 0.25, 0);
    ctx.closePath();
    ctx.fillStyle = 'rgba(160, 30, 30, 0.85)';
    ctx.fill();
    
    // Compass South Needle (Dark Brown)
    ctx.beginPath();
    ctx.moveTo(0, cr * 1.3);
    ctx.lineTo(cr * 0.25, 0);
    ctx.lineTo(-cr * 0.25, 0);
    ctx.closePath();
    ctx.fillStyle = 'rgba(60, 40, 20, 0.85)';
    ctx.fill();

    // East/West simple pointers
    ctx.beginPath();
    ctx.moveTo(cr * 0.9, 0);
    ctx.lineTo(0, cr * 0.15);
    ctx.lineTo(0, -cr * 0.15);
    ctx.closePath();
    ctx.fillStyle = 'rgba(60, 40, 20, 0.6)';
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(-cr * 0.9, 0);
    ctx.lineTo(0, cr * 0.15);
    ctx.lineTo(0, -cr * 0.15);
    ctx.closePath();
    ctx.fill();

    // Center dot
    ctx.beginPath();
    ctx.arc(0, 0, cr * 0.15, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(230, 200, 150, 1)';
    ctx.fill();
    ctx.stroke();
    
    ctx.restore();

    return canvas;
}