Image Sapphire Hue Filter Effect Tool

function processImage(originalImg, sapphireHueDegrees = 216) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the originalImg is an HTMLImageElement and is loaded.
    // The problem statement implies originalImg is a JavaScript Image object.
    // We'll use naturalWidth and naturalHeight for intrinsic dimensions.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

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

    // 1. Draw the original image onto the canvas
    // This provides the "backdrop" for the blending operation.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // 2. Set the global composite operation to 'hue'
    // The 'hue' operation takes the hue of the source color (what we draw next)
    // and the saturation and luminosity of the destination/backdrop color (the original image).
    ctx.globalCompositeOperation = 'hue';

    // 3. Define the "Sapphire" hue and create a fill style.
    // The `sapphireHueDegrees` parameter defines the target hue. Default is 216, a common hue for sapphire blue.
    // For the 'hue' blend mode, the saturation and lightness of this fillStyle
    // should ideally not affect the S & L of the resulting image pixels, as these are taken from the backdrop.
    // Using 100% saturation and 50% lightness is a standard way to specify a "pure" hue for the source.
    const fillSaturation = 100; // percent
    const fillLightness = 50;  // percent
    ctx.fillStyle = `hsl(${sapphireHueDegrees}, ${fillSaturation}%, ${fillLightness}%)`;

    // 4. Draw a filled rectangle over the entire canvas
    // This operation will apply the hue from `fillStyle` to each pixel,
    // while preserving each pixel's original saturation and lightness.
    ctx.fillRect(0, 0, width, height);
    
    // 5. Reset the global composite operation to its default state
    // This is good practice if the canvas context is to be used for further drawing operations.
    ctx.globalCompositeOperation = 'source-over';

    // Return the modified canvas
    return canvas;
}