Image To Colored Pencil Art Creator

async function processImage(originalImg, colorOpacity = 0.8, paperTexture = 0.05, sketchDetail = 10) {
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    // 1. Create the final canvas which will be returned
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');

    // 2. Create a paper texture background
    // Fill with a slightly off-white, warm paper color
    ctx.fillStyle = '#FBFBF8';
    ctx.fillRect(0, 0, w, h);

    // Add noise to simulate paper grain, if a texture amount is specified
    if (paperTexture > 0) {
        const imageData = ctx.getImageData(0, 0, w, h);
        const data = imageData.data;
        // Clamp texture to a reasonable range (0 to 1) to prevent overwhelming noise
        const clampedTexture = Math.max(0, Math.min(paperTexture, 1.0));
        const noiseFactor = 255 * clampedTexture;
        for (let i = 0; i < data.length; i += 4) {
            // Add a random value to each color channel
            const noise = (Math.random() - 0.5) * noiseFactor;
            data[i] = Math.max(0, Math.min(255, data[i] + noise));
            data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + noise));
            data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + noise));
        }
        ctx.putImageData(imageData, 0, 0);
    }

    // 3. Create the layer for the sketch effect.
    // This is done by creating a blurred, inverted version of the original image,
    // which is then composited using a 'color-dodge' blend mode.

    // Create an in-memory canvas for the inverted image
    const invertedCanvas = document.createElement('canvas');
    invertedCanvas.width = w;
    invertedCanvas.height = h;
    const invertedCtx = invertedCanvas.getContext('2d');
    invertedCtx.drawImage(originalImg, 0, 0, w, h);
    // Inverting colors using 'difference' with white is an effective method
    invertedCtx.globalCompositeOperation = 'difference';
    invertedCtx.fillStyle = 'white';
    invertedCtx.fillRect(0, 0, w, h);

    // Create another in-memory canvas for the blurred version of the inverted image
    const dodgeLayerCanvas = document.createElement('canvas');
    dodgeLayerCanvas.width = w;
    dodgeLayerCanvas.height = h;
    const dodgeCtx = dodgeLayerCanvas.getContext('2d');

    // Map the intuitive 'sketchDetail' parameter (1-20) to a blur radius.
    // Higher detail means a smaller blur radius for sharper lines.
    const clampedDetail = Math.max(1, Math.min(sketchDetail, 20));
    const blurRadius = (21 - clampedDetail) / 2; // Maps 1-20 to 10px-0.5px blur
    dodgeCtx.filter = `blur(${blurRadius}px)`;

    // Draw the inverted image onto this canvas to apply the blur
    dodgeCtx.drawImage(invertedCanvas, 0, 0);

    // 4. Composite all layers together onto the final canvas

    // First, blend the original image's colors onto the paper texture.
    // 'multiply' darkens the base (paper) with the blend (image) colors,
    // preserving the paper texture underneath.
    const clampedOpacity = Math.max(0, Math.min(colorOpacity, 1.0));
    ctx.globalAlpha = clampedOpacity;
    ctx.globalCompositeOperation = 'multiply';
    ctx.drawImage(originalImg, 0, 0, w, h);

    // Second, apply the sketch layer using 'color-dodge'.
    // This blend mode brightens the base layer, creating strong contrast
    // along the edges from the blurred layer, which simulates pencil outlines and highlights.
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = 'color-dodge';
    ctx.drawImage(dodgeLayerCanvas, 0, 0, w, h);

    // Reset the context's global settings for good practice
    ctx.globalCompositeOperation = 'source-over';

    return canvas;
}