Image Sunlight Through Blinds Filter Effect Tool

function processImage(
    originalImg,
    blindColor = "rgba(255, 220, 180, 0.35)", // Color of the light stripes (warm, semi-transparent)
    blindWidth = 30,  // Width of each light stripe (the "sunlight")
    gapWidth = 20,    // Width of the gap/shadow between light stripes
    angleInDegrees = 45 // Angle of the blinds/light stripes in degrees
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for intrinsic image dimensions. Fallback to width/height.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are invalid or zero, return an empty canvas.
    // This also handles cases where the image might not have loaded, resulting in 0x0 dimensions.
    if (imgWidth <= 0 || imgHeight <= 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // --- Parameter Sanitization ---
    // Use provided blindColor if it's a string, otherwise default.
    const finalBlindColor = (typeof blindColor === 'string') ? blindColor : "rgba(255, 220, 180, 0.35)";

    // Process blindWidth: convert to number, ensure non-negative, or use default.
    let finalBlindWidth = Number(blindWidth);
    if (isNaN(finalBlindWidth) || finalBlindWidth < 0) {
        finalBlindWidth = 30; // Default blind width
    }

    // Process gapWidth: convert to number, ensure non-negative, or use default.
    let finalGapWidth = Number(gapWidth);
    if (isNaN(finalGapWidth) || finalGapWidth < 0) {
        finalGapWidth = 20; // Default gap width
    }
    
    // Process angleInDegrees: convert to number, or use default. Angle can be negative.
    let finalAngle = Number(angleInDegrees);
    if (isNaN(finalAngle)) {
        finalAngle = 45; // Default angle
    }

    // If light stripes have no width, no effect to apply.
    // Return canvas with only the original image.
    if (finalBlindWidth <= 0) {
        return canvas;
    }

    // --- Apply Blinds Effect ---
    // Save context state before transformations (translate, rotate)
    ctx.save();

    // Translate context to the center of the canvas to rotate around this point
    ctx.translate(imgWidth / 2, imgHeight / 2);
    
    // Rotate context by the specified angle
    ctx.rotate(finalAngle * Math.PI / 180);

    // Calculate the maximum length needed for stripes to cover the entire canvas
    // when rotated. This is the diagonal of the canvas.
    const maxLength = Math.sqrt(imgWidth * imgWidth + imgHeight * imgHeight);

    // Set the fill style for the light stripes
    ctx.fillStyle = finalBlindColor;

    // Calculate the period of one light stripe + one gap
    const period = finalBlindWidth + finalGapWidth;

    // If period is zero or negative (e.g. if gapWidth was allowed to be very negative),
    // it would lead to an infinite loop or no drawing.
    // Since finalBlindWidth > 0 and finalGapWidth >= 0, period will be > 0.
    // A defensive check just in case:
    if (period <= 0) {
        ctx.restore(); // Restore context before returning
        return canvas;
    }

    // Draw the light stripes.
    // The stripes are drawn as horizontal rectangles in the *rotated* coordinate system.
    // The iteration is along the Y-axis of this rotated system, from its "top" to "bottom".
    for (let currentPos = -maxLength / 2; currentPos < maxLength / 2; currentPos += period) {
        // x: -maxLength / 2 (start from the "left" edge of the rotated bounding box)
        // y: currentPos (current stripe's "top" edge in the rotated system)
        // width: maxLength (span the entire "width" of the rotated bounding box)
        // height: finalBlindWidth (this is the width of the light stripe itself)
        ctx.fillRect(-maxLength / 2, currentPos, maxLength, finalBlindWidth);
    }

    // Restore the context to its original state (undo translation and rotation)
    ctx.restore();

    return canvas;
}