Image X-Ray Effect Creator

function processImage(originalImg, contrastValue = 1.8, brightnessValue = 1.1, tintColor = "cyan", tintStrength = 0.25) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure originalImg properties are valid (image loaded)
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If image dimensions are zero, return an empty canvas or handle error
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image has zero dimensions. Is it loaded properly?");
        canvas.width = 1; // Avoid 0x0 canvas issues
        canvas.height = 1;
        return canvas; // Return a minimal canvas
    }

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

    // Construct the filter string for the X-Ray effect
    // 1. grayscale(1): Convert to black and white. (1 means 100%)
    // 2. invert(1): Invert colors (black becomes white, white becomes black). (1 means 100%)
    //    This combination means originally light areas become dark, and dark areas become light.
    //    In X-rays, denser materials (bones) appear lighter. So, this stylistic filter
    //    will make originally darker parts of the photo appear lighter, simulating "bones".
    // 3. contrast(): Increase contrast to make variations more stark (enhancing "bone" appearance).
    //    A value of 2 means 200% contrast.
    // 4. brightness(): Adjust overall brightness.
    //    A value of 1.1 means 110% brightness.
    const filterString = `grayscale(1) invert(1) contrast(${Math.max(0, contrastValue)}) brightness(${Math.max(0, brightnessValue)})`;
    ctx.filter = filterString;

    // Draw the image onto the canvas; filters are applied during this step
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Reset filters before applying tint, so tint is not affected by previous filters
    ctx.filter = 'none';

    // Apply tint if specified
    // Clamp tintStrength to be between 0 and 1
    const actualTintStrength = Math.max(0, Math.min(1, tintStrength));

    if (tintColor && typeof tintColor === 'string' && tintColor.toLowerCase() !== 'none' && actualTintStrength > 0) {
        // Use globalAlpha for transparency of the tint layer
        ctx.globalAlpha = actualTintStrength;
        // Set fill style to the tint color
        ctx.fillStyle = tintColor;
        // The default globalCompositeOperation is 'source-over', which is appropriate for layering
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // Reset globalAlpha to default
        ctx.globalAlpha = 1.0;
    }

    return canvas;
}