Image To Watercolor Art Creator

/**
 * Converts an image into a watercolor-style artwork by applying a series of filters and composite operations.
 * This function simulates the bleeding colors, paper texture, and vibrant look of a watercolor painting.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @param {number} blurAmount=8 The radius of the blur effect, simulating color bleeding. Higher values are more "wet".
 * @param {number} textureOpacity=0.15 The opacity of the paper texture overlay. Range from 0 to 1.
 * @param {number} edgeAmount=0.6 The amount of sharpened original detail to blend back in. Range from 0 to 1.
 * @param {number} saturation=1.5 The color saturation multiplier. 1 is original, higher is more vibrant.
 * @returns {HTMLCanvasElement} A new canvas element with the watercolor effect applied.
 */
function processImage(originalImg, blurAmount = 8, textureOpacity = 0.15, edgeAmount = 0.6, saturation = 1.5) {
    // 1. Setup Canvas
    // Create a new canvas element to draw the result on.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

    // 2. Layer 1: Base Watercolor Layer
    // This layer is a blurred, brightened, and saturated version of the original image,
    // which simulates the soft, bleeding washes of watercolor paint.
    ctx.filter = `blur(${blurAmount}px) brightness(1.1) saturate(${saturation})`;
    ctx.drawImage(originalImg, 0, 0, width, height);
    // Reset the filter so it doesn't affect subsequent drawing operations.
    ctx.filter = 'none';

    // 3. Layer 2: Reintroduce Detail
    // By compositing the original image back on top with 'hard-light', we reintroduce
    // some of the original's sharpness and contrast in a stylistic, painterly way.
    // 'edgeAmount' controls the strength of this effect.
    ctx.globalCompositeOperation = 'hard-light';
    ctx.globalAlpha = edgeAmount;
    ctx.drawImage(originalImg, 0, 0, width, height);
    // Reset composite mode and alpha for the next layer.
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    // 4. Layer 3: Paper Texture
    // To simulate the texture of watercolor paper, we generate a noise pattern
    // and overlay it on the entire image.
    const noiseCanvas = document.createElement('canvas');
    const noiseCtx = noiseCanvas.getContext('2d');
    const noiseSize = 150; // Size of the texture tile.
    noiseCanvas.width = noiseSize;
    noiseCanvas.height = noiseSize;

    const imageData = noiseCtx.createImageData(noiseSize, noiseSize);
    const data = imageData.data;
    // Iterate through pixels and add random, subtle, off-white noise.
    for (let i = 0; i < data.length; i += 4) {
        const rand = Math.floor(Math.random() * 40);
        data[i] = 215 + rand; // R
        data[i + 1] = 215 + rand; // G
        data[i + 2] = 215 + rand; // B
        data[i + 3] = 255; // Alpha
    }
    noiseCtx.putImageData(imageData, 0, 0);

    // Create a pattern from the noise canvas and fill the main canvas with it.
    // The 'overlay' composite mode blends the texture nicely with the image below.
    const pattern = ctx.createPattern(noiseCanvas, 'repeat');
    ctx.globalCompositeOperation = 'overlay';
    ctx.globalAlpha = textureOpacity;
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, width, height);
    
    // Reset composite mode and alpha again.
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    // 5. Return Final Canvas
    // The canvas now holds the completed watercolor artwork.
    return canvas;
}