Image Chakra Energy Filter Effect Tool

function processImage(originalImg, chakraName = "all", intensity = 0.5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for HTMLImageElement, fallback to width/height for other sources like canvas or video
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    // Ensure intensity is a number and clamped to the [0, 1] range
    intensity = Math.max(0, Math.min(1, Number(intensity)));

    // Chakra definitions. Keys are lowercase for case-insensitive matching.
    const chakraDefinitions = {
        colors: {
            root: { r: 255, g: 0, b: 0 },       // Red
            sacral: { r: 255, g: 165, b: 0 },   // Orange
            solar: { r: 255, g: 255, b: 0 },    // Yellow
            heart: { r: 0, g: 255, b: 0 },      // Green (bright)
            throat: { r: 30, g: 144, b: 255 },  // Dodger Blue (vibrant light blue)
            thirdeye: { r: 75, g: 0, b: 130 },  // Indigo
            crown: { r: 148, g: 0, b: 211 }     // Dark Violet / Purple
        },
        // Order for "all" chakras gradient (typically root to crown, bottom to top or vice versa)
        // This implementation makes a top-to-bottom gradient matching this order.
        order: ["root", "sacral", "solar", "heart", "throat", "thirdeye", "crown"]
    };
    
    // Prepare chakraName for matching (convert to string and lowercase)
    const L_chakraName = String(chakraName).toLowerCase();

    // 1. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // If intensity is 0, no visible effect will be applied,
    // so we can return the canvas with just the original image.
    if (intensity === 0) {
        return canvas;
    }

    // Store the original canvas context settings to restore them later
    const originalCompositeOperation = ctx.globalCompositeOperation;
    const originalGlobalAlpha = ctx.globalAlpha;
    
    // Set blending mode for the color overlay.
    // 'overlay' tends to work well for "energy" or "vibrancy" effects as it increases contrast
    // and mixes colors in a way that preserves highlights and shadows.
    // Other useful modes could be 'color', 'soft-light', 'hard-light', or 'screen'.
    ctx.globalCompositeOperation = 'overlay'; 
    
    // Set the overall opacity of the color layer being applied.
    ctx.globalAlpha = intensity;

    if (L_chakraName === "all") {
        // Apply all chakra colors as a smooth vertical gradient
        const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
        const numColors = chakraDefinitions.order.length;

        chakraDefinitions.order.forEach((key, index) => {
            const color = chakraDefinitions.colors[key];
            // Color stops for the gradient are fully opaque;
            // the overall transparency of the gradient layer is controlled by ctx.globalAlpha.
            gradient.addColorStop(index / (numColors - 1), `rgb(${color.r}, ${color.g}, ${color.b})`);
        });
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

    } else if (chakraDefinitions.colors[L_chakraName]) {
        // Apply a single specified chakra color
        const color = chakraDefinitions.colors[L_chakraName];
        // The fill color itself is fully opaque; its trasparency is handled by ctx.globalAlpha.
        ctx.fillStyle = `rgb(${color.r}, ${color.g}, ${color.b})`;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    } else {
        // If chakraName is not "all" and not a recognized chakra key,
        // print a warning and don't apply any color filter.
        // The canvas will contain only the original image.
        console.warn(`Chakra name "${chakraName}" not recognized. No filter applied.`);
        // No actual drawing happened with modified state, but good practice to restore.
        ctx.globalCompositeOperation = originalCompositeOperation;
        ctx.globalAlpha = originalGlobalAlpha;
        return canvas;
    }

    // Restore the original canvas context settings
    ctx.globalCompositeOperation = originalCompositeOperation;
    ctx.globalAlpha = originalGlobalAlpha;

    return canvas;
}