Red Pencil Image Tool

function processImage(originalImg, blurRadius = '5', pencilColor = '#cc3333', darkenLines = '0') {
    const radius = parseFloat(blurRadius) || 5;
    const darken = parseInt(darkenLines, 10) || 0;

    const width = originalImg.width;
    const height = originalImg.height;

    // Canvas A: Holds the grayscale version of the image
    const canvasA = document.createElement('canvas');
    canvasA.width = width;
    canvasA.height = height;
    const ctxA = canvasA.getContext('2d');
    
    // Fill with white to prevent transparent edge bleed
    ctxA.fillStyle = '#ffffff';
    ctxA.fillRect(0, 0, width, height);
    
    // Draw the image completely grayscaled
    ctxA.filter = 'grayscale(100%)';
    ctxA.drawImage(originalImg, 0, 0);

    // Canvas B: Holds the inverted + blurred grayscale version of the image
    const canvasB = document.createElement('canvas');
    canvasB.width = width;
    canvasB.height = height;
    const ctxB = canvasB.getContext('2d');
    
    ctxB.fillStyle = '#ffffff';
    ctxB.fillRect(0, 0, width, height);
    
    // Apply grayscale, invert, and gaussian blur to create the sketch differential
    ctxB.filter = `grayscale(100%) invert(100%) blur(${radius}px)`;
    ctxB.drawImage(originalImg, 0, 0);

    // Canvas Result: Combines layers to form the final pencil sketch
    const canvasResult = document.createElement('canvas');
    canvasResult.width = width;
    canvasResult.height = height;
    const ctxResult = canvasResult.getContext('2d');
    
    ctxResult.fillStyle = '#ffffff';
    ctxResult.fillRect(0, 0, width, height);

    // Step 1: Draw the base grayscale image
    ctxResult.drawImage(canvasA, 0, 0);

    // Step 2: Blend the inverted blurred image using Color Dodge
    // This extracts the edges to create a beautifully shaded pencil look
    ctxResult.globalCompositeOperation = 'color-dodge';
    ctxResult.drawImage(canvasB, 0, 0);

    // Step 3 (Optional): Darken the sketch lines for more intensity
    if (darken > 0) {
        // Cache the current black-and-white sketch into canvas A
        ctxA.globalCompositeOperation = 'source-over';
        ctxA.filter = 'none';
        ctxA.drawImage(canvasResult, 0, 0);

        // Multiply the sketch over itself to intensify dark pencil lines
        ctxResult.globalCompositeOperation = 'multiply';
        for (let i = 0; i < darken; i++) {
            ctxResult.drawImage(canvasA, 0, 0);
        }
    }

    // Step 4: Tint the black pencil lines with the specified red color
    // The 'screen' blend mode maps Black (0) to the pencilColor and White (255) remains White
    ctxResult.globalCompositeOperation = 'screen';
    ctxResult.fillStyle = pencilColor;
    ctxResult.fillRect(0, 0, width, height);

    // Clean up composite operation
    ctxResult.globalCompositeOperation = 'source-over';

    return canvasResult;
}