Image Treasure Hunt Day Tool

function processImage(originalImg, intensity = 80, pathColor = '#3e2723', xColor = '#c62828', title = 'День клада') {
    const canvas = document.createElement('canvas');
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;
    
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    const shortSide = Math.min(w, h);

    // 1. Apply a vintage/parchment filter to the original image
    ctx.filter = `sepia(${intensity}%) contrast(1.15) brightness(0.85)`;
    ctx.drawImage(originalImg, 0, 0, w, h);
    ctx.filter = 'none';

    // 2. Add vignette to darken the edges (simulating old map degradation)
    const cx = w / 2;
    const cy = h / 2;
    const maxRadius = Math.sqrt(cx * cx + cy * cy);
    const gradient = ctx.createRadialGradient(cx, cy, maxRadius * 0.4, cx, cy, maxRadius * 0.9);
    gradient.addColorStop(0, 'rgba(40, 20, 0, 0)');
    gradient.addColorStop(1, 'rgba(40, 20, 0, 0.8)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, w, h);

    // 3. Draw inner frames to resemble classic surveying or cartography map borders
    ctx.beginPath();
    const margin1 = shortSide * 0.03;
    ctx.rect(margin1, margin1, w - margin1 * 2, h - margin1 * 2);
    ctx.lineWidth = shortSide * 0.005;
    ctx.strokeStyle = 'rgba(60, 30, 10, 0.6)';
    ctx.stroke();

    ctx.beginPath();
    const margin2 = shortSide * 0.038;
    ctx.rect(margin2, margin2, w - margin2 * 2, h - margin2 * 2);
    ctx.lineWidth = shortSide * 0.002;
    ctx.stroke();

    // 4. Draw the dashed treasure hunter's path
    ctx.lineWidth = shortSide * 0.015;
    ctx.strokeStyle = pathColor;
    ctx.setLineDash([shortSide * 0.03, shortSide * 0.03]);
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // Set points to sweep across the image naturally
    const startX = w * 0.15;
    const startY = h * 0.85; 
    const cp1X = w * 0.4;
    const cp1Y = h * 0.6;
    const cp2X = w * 0.3;
    const cp2Y = h * 0.25;
    const endX = w * 0.75;
    const endY = h * 0.35; 

    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, endX, endY);
    ctx.stroke();

    // 5. Draw big 'X' marking the target location
    ctx.setLineDash([]);
    ctx.lineWidth = shortSide * 0.025;
    ctx.strokeStyle = xColor;
    ctx.lineCap = 'round';
    const xSize = shortSide * 0.04;
    
    // Render the X with slight imperfection to feel hand-drawn
    ctx.beginPath();
    ctx.moveTo(endX - xSize, endY - xSize);
    ctx.lineTo(endX + xSize * 0.9, endY + xSize * 1.1);
    ctx.moveTo(endX + xSize, endY - xSize * 0.9);
    ctx.lineTo(endX - xSize * 1.1, endY + xSize);
    ctx.stroke();

    // 6. Provide the Map Title
    if (title && title.trim() !== '') {
        const fontSize = shortSide * 0.06;
        ctx.font = `bold italic ${fontSize}px Georgia, serif`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
        ctx.shadowBlur = shortSide * 0.008;
        ctx.fillStyle = '#fceabb'; // Faded warm text tone 
        ctx.fillText(title, w / 2, h * 0.04);
        ctx.shadowColor = 'transparent'; 
        ctx.lineWidth = shortSide * 0.003;
        ctx.strokeStyle = '#3e2723';
        ctx.strokeText(title, w / 2, h * 0.04);
    }

    // 7. Draw a stylish vintage compass rose
    const compRadius = shortSide * 0.08;
    const compX = w * 0.16;
    const compY = h * 0.18; 
    
    ctx.save();
    ctx.translate(compX, compY);

    // Compass Base
    ctx.beginPath();
    ctx.arc(0, 0, compRadius, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(230, 210, 180, 0.5)';
    ctx.fill();

    // Compass Rings
    ctx.beginPath();
    ctx.arc(0, 0, compRadius, 0, Math.PI * 2);
    ctx.lineWidth = compRadius * 0.04;
    ctx.strokeStyle = '#3e2723';
    ctx.stroke();
    
    ctx.beginPath();
    ctx.arc(0, 0, compRadius * 0.85, 0, Math.PI * 2);
    ctx.lineWidth = compRadius * 0.02;
    ctx.stroke();

    // Compass Needles
    const drawPoint = (angle, colorLeft, colorRight) => {
        ctx.save();
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, -compRadius * 1.15);
        ctx.lineTo(compRadius * 0.2, 0);
        ctx.lineTo(-compRadius * 0.2, 0);
        ctx.closePath();
        ctx.fillStyle = colorLeft;
        ctx.fill();
        
        ctx.beginPath();
        ctx.moveTo(0, -compRadius * 1.15);
        ctx.lineTo(compRadius * 0.2, 0);
        ctx.lineTo(0, 0);
        ctx.closePath();
        ctx.fillStyle = colorRight;
        ctx.fill();
        ctx.restore();
    };

    drawPoint(0, '#5c3a21', '#21120a');             // North
    drawPoint(Math.PI / 2, '#5c3a21', '#21120a');   // East
    drawPoint(Math.PI, '#5c3a21', '#21120a');       // South
    drawPoint(Math.PI * 1.5, '#5c3a21', '#21120a'); // West

    // Compass Core
    ctx.beginPath();
    ctx.arc(0, 0, compRadius * 0.12, 0, Math.PI * 2);
    ctx.fillStyle = '#110a05';
    ctx.fill();

    // Cyrillic Compass Directions (appropriate for "День клада")
    ctx.fillStyle = '#3e2723';
    ctx.font = `bold ${compRadius * 0.4}px Georgia, serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    const letterDist = compRadius * 1.35;
    ctx.fillText('С', 0, -letterDist);   // North (Север)
    ctx.fillText('В', letterDist, 0);    // East (Восток)
    ctx.fillText('Ю', 0, letterDist);    // South (Юг)
    ctx.fillText('З', -letterDist, 0);   // West (Запад)

    ctx.restore();

    return canvas;
}