Image Telescope View Filter Effect Tool

function processImage(
    originalImg, 
    backgroundColor = 'black', 
    addCrosshairsStr = 'false', 
    crosshairsColor = 'rgba(200, 200, 200, 0.5)', 
    crosshairsLineWidth = 1, 
    zoomFactor = 1.0, 
    vignetteStrength = 0.0
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for the true dimensions of the image
    const imgNatWidth = originalImg.naturalWidth;
    const imgNatHeight = originalImg.naturalHeight;

    // If image is not loaded or has no dimensions, return a small error indicator canvas
    if (!imgNatWidth || !imgNatHeight) {
        console.error("Telescope Filter: Image not loaded or has zero dimensions.");
        canvas.width = 50;
        canvas.height = 50;
        ctx.fillStyle = 'red';
        ctx.font = '10px sans-serif';
        ctx.fillText("Error", 5, 25);
        return canvas;
    }

    // Set canvas dimensions to match the original image
    canvas.width = imgNatWidth;
    canvas.height = imgNatHeight;

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    // The radius of the telescope view circle is based on the smaller dimension of the canvas,
    // so the circle is fully contained.
    const radius = Math.min(canvas.width, canvas.height) / 2;

    // --- Parameter Parsing ---
    // Zoom Factor: how much to zoom into the center of the image (1.0 = no zoom)
    let parsedZoomFactor = parseFloat(String(zoomFactor));
    if (isNaN(parsedZoomFactor)) {
        parsedZoomFactor = 1.0; // Default if parsing fails
    }
    const zf = Math.max(1.0, parsedZoomFactor); // Ensure zoom is at least 1.0 (no zooming out)

    // Vignette Strength: opacity of the dark edge vignette (0.0 = none, 1.0 = fully opaque black)
    let parsedVignetteStrength = parseFloat(String(vignetteStrength));
    if (isNaN(parsedVignetteStrength)) {
        parsedVignetteStrength = 0.0; // Default if parsing fails
    }
    const vStrength = Math.max(0.0, Math.min(1.0, parsedVignetteStrength)); // Clamp between 0.0 and 1.0

    // Crosshairs Line Width: thickness of the crosshair lines
    let parsedCrosshairLineWidth = parseFloat(String(crosshairsLineWidth));
    if (isNaN(parsedCrosshairLineWidth)) {
        parsedCrosshairLineWidth = 1; // Default if parsing fails
    }
    const finalCrosshairLineWidth = Math.max(0.5, parsedCrosshairLineWidth); // Ensure minimum visible thickness

    // Add Crosshairs: boolean flag derived from string input
    const addCrosshairs = String(addCrosshairsStr).toLowerCase() === 'true' || String(addCrosshairsStr) === '1';

    // 1. Draw the background color
    // This color will be visible outside the circular telescope view.
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Create a circular clipping path
    ctx.save(); // Save the current canvas context state
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, true); // Define the circular path
    ctx.closePath();
    ctx.clip(); // Apply the clipping path: future drawings only visible inside this circle

    // 3. Draw the original image, possibly zoomed
    // Calculate source image region to draw if zoomed
    const sWidth = imgNatWidth / zf;
    const sHeight = imgNatHeight / zf;
    const sx = (imgNatWidth - sWidth) / 2;  // Center X of source region
    const sy = (imgNatHeight - sHeight) / 2; // Center Y of source region
    
    // Draw the (potentially zoomed) portion of the original image
    // onto the entire canvas. It will be clipped by the circular path.
    ctx.drawImage(originalImg, sx, sy, sWidth, sHeight, 0, 0, canvas.width, canvas.height);

    // 4. Optional: Add vignette effect inside the circle
    // This darkens the edges of the circular view, typical for telescope/lens effects.
    if (vStrength > 0) {
        // The vignette inner radius defines how far the clear area extends from the center.
        // Here, 60% of the radius is fully clear, gradient starts after that.
        const vignetteInnerRadius = radius * 0.6; 
        
        const vignetteGradient = ctx.createRadialGradient(
            centerX, centerY, vignetteInnerRadius, // Inner circle (start of gradient)
            centerX, centerY, radius               // Outer circle (end of gradient, edge of scope)
        );
        vignetteGradient.addColorStop(0, `rgba(0,0,0,0)`);             // Transparent at the inner radius
        vignetteGradient.addColorStop(1, `rgba(0,0,0,${vStrength})`); // Darker towards the edge of the scope view
        
        ctx.fillStyle = vignetteGradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill the clipped area with the gradient
    }

    ctx.restore(); // Restore the canvas context state (removes the clipping path)

    // 5. Optional: Draw crosshairs on top (after restoring context)
    if (addCrosshairs) {
        ctx.strokeStyle = crosshairsColor;
        ctx.lineWidth = finalCrosshairLineWidth;

        // Horizontal line of the crosshairs, spanning the diameter of the circle
        ctx.beginPath();
        ctx.moveTo(centerX - radius, centerY);
        ctx.lineTo(centerX + radius, centerY);
        ctx.stroke();

        // Vertical line of the crosshairs, spanning the diameter of the circle
        ctx.beginPath();
        ctx.moveTo(centerX, centerY - radius);
        ctx.lineTo(centerX, centerY + radius);
        ctx.stroke();
    }

    return canvas;
}