Image Dark Aesthetic Styler With Starry Sparkles

function processImage(originalImg, darkness = 0.7, starDensity = 0.0005, starSize = 2) {
    // 1. Create a canvas and get its 2D rendering context.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set the canvas dimensions to match the original image's intrinsic size.
    // Using naturalWidth/Height is safer in case the img element's display size is altered by CSS.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // 4. Get the image data, which is an array of RGBA values for each pixel.
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Sanitize the darkness parameter to ensure it's a value between 0 and 1.
    const clampedDarkness = Math.max(0, Math.min(1, darkness));

    // 5. Process each pixel to create the dark, black-and-white aesthetic.
    // The loop increments by 4 to process one pixel (R, G, B, A) at a time.
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Convert the pixel to grayscale using the luminosity method, which
        // weights R, G, and B according to human brightness perception.
        const grayscale = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply the darkness filter by scaling the grayscale value.
        // A darkness of 0.7 means the color will be 30% of its original brightness.
        const darkValue = grayscale * (1 - clampedDarkness);

        // Set the Red, Green, and Blue channels to the new dark grayscale value.
        data[i] = darkValue;
        data[i + 1] = darkValue;
        data[i + 2] = darkValue;
        // The alpha channel (data[i + 3]) is left unchanged.
    }

    // 6. Put the modified pixel data back onto the canvas.
    ctx.putImageData(imageData, 0, 0);

    // 7. Add starry sparkles on top of the darkened image.
    // Calculate the number of stars based on the image size and star density.
    const numStars = Math.floor(canvas.width * canvas.height * starDensity);

    for (let i = 0; i < numStars; i++) {
        // Generate random properties for each star's position, size, and brightness.
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const radius = Math.random() * starSize;
        const opacity = Math.random() * 0.7 + 0.3; // Opacity from 0.3 to 1.0.

        // Set the star's color to white with the random opacity.
        ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;

        // Draw the star as a small circle.
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, Math.PI * 2);
        ctx.fill();
    }

    // 8. Return the final canvas element, which can be displayed on the page.
    return canvas;
}