Photo To Watercolor Painting Converter

/**
 * Converts a photo into a watercolor painting style image.
 * This is achieved by applying a blur for color bleeding, overlaying a paper texture,
 * and adding a vignette to simulate pigment pooling at the edges.
 *
 * @param {Image} originalImg The original source image object.
 * @param {number} [blurRadius=8] The radius of the blur effect in pixels. Higher values create softer, more blended colors.
 * @param {number} [textureStrength=0.3] The visibility of the paper texture (0 to 1). 0 is no texture, 1 is full strength.
 * @param {number} [edgeDarkening=0.6] The strength of the dark vignette effect at the edges (0 to 1). 0 is none, 1 is very dark.
 * @param {number} [contrast=1.6] The contrast enhancement for the colors. Values greater than 1 increase contrast.
 * @returns {HTMLCanvasElement} A new canvas element with the watercolor painting effect applied.
 */
function processImage(originalImg, blurRadius = 8, textureStrength = 0.3, edgeDarkening = 0.6, contrast = 1.6) {
    // 1. Setup main canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;
    canvas.width = w;
    canvas.height = h;

    // 2. Create paper texture in a separate canvas
    const textureCanvas = document.createElement('canvas');
    textureCanvas.width = w;
    textureCanvas.height = h;
    const textureCtx = textureCanvas.getContext('2d', {
        willReadFrequently: true
    });

    const imageData = textureCtx.createImageData(w, h);
    const data = imageData.data;
    // Generate grayscale noise
    for (let i = 0; i < data.length; i += 4) {
        // Use a value biased towards mid-gray to prevent overly harsh blacks and whites
        const val = Math.random() * 100 + 90;
        data[i] = val; // red
        data[i + 1] = val; // green
        data[i + 2] = val; // blue
        data[i + 3] = 255; // alpha
    }
    textureCtx.putImageData(imageData, 0, 0);

    // Lightly blur the texture to make it less sharp and more like paper grain
    textureCtx.filter = 'blur(1px)';
    textureCtx.drawImage(textureCanvas, 0, 0);
    textureCtx.filter = 'none';


    // 3. Main processing and layering
    // Step 3a: Fill with a paper color background
    ctx.fillStyle = '#fdfdf6'; // A slightly warm off-white for the paper
    ctx.fillRect(0, 0, w, h);

    // Step 3b: Draw the blurred and contrast-adjusted image
    // This forms the main "paint" layer, simulating how colors bleed on wet paper.
    // A saturation boost helps sell the watercolor effect.
    ctx.filter = `blur(${blurRadius}px) contrast(${contrast}) saturate(1.2)`;
    ctx.drawImage(originalImg, 0, 0, w, h);
    ctx.filter = 'none';

    // Step 3c: Overlay the paper texture
    // 'overlay' blend mode works well for adding texture without overpowering the image.
    ctx.globalCompositeOperation = 'overlay';
    ctx.globalAlpha = textureStrength;
    ctx.drawImage(textureCanvas, 0, 0);

    // Reset composite operation and alpha for the next steps
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 1.0;

    // Step 3d: Add edge darkening (vignette effect)
    // This simulates pigment pooling at the edges of the paper as it dries.
    const gradient = ctx.createRadialGradient(w / 2, h / 2, Math.min(w, h) * 0.2, w / 2, h / 2, Math.max(w, h) * 0.7);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    // A dark, slightly warm brown is often more natural than pure black for this effect.
    gradient.addColorStop(1, `rgba(50, 40, 30, ${edgeDarkening})`);

    ctx.fillStyle = gradient;
    // 'multiply' is a good blend mode for darkening.
    ctx.globalCompositeOperation = 'multiply';
    ctx.fillRect(0, 0, w, h);

    // Reset composite operation to default
    ctx.globalCompositeOperation = 'source-over';

    return canvas;
}