Photo Pattern And Noise Generator

function processImage(originalImg, patternType = "noise", intensity = 0.5, patternSize = 20, patternColor = "#000000") {
    const width = originalImg.width;
    const height = originalImg.height;

    // Create the main drawing canvas
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Create an off-screen canvas to generate the repeated pattern
    const pCanvas = document.createElement("canvas");
    const pCtx = pCanvas.getContext("2d");

    const pt = String(patternType).toLowerCase();
    const size = Math.max(2, Math.floor(Number(patternSize) || 20));
    
    // Generate the specific pattern
    if (pt === "checkerboard") {
        pCanvas.width = size * 2;
        pCanvas.height = size * 2;
        pCtx.fillStyle = patternColor;
        pCtx.fillRect(0, 0, size, size);
        pCtx.fillRect(size, size, size, size);
        
    } else if (pt === "grid") {
        pCanvas.width = size;
        pCanvas.height = size;
        pCtx.fillStyle = patternColor;
        
        // Draw top and left edges to form a grid when repeated
        const lineWidth = Math.max(1, Math.floor(size / 20)); // dynamically scale the line width
        pCtx.fillRect(0, 0, size, lineWidth);
        pCtx.fillRect(0, 0, lineWidth, size);
        
    } else {
        // Default to "noise"
        // Generate a 128x128 monochrome noise texture to tile
        const noiseTileSize = 128; 
        pCanvas.width = noiseTileSize;
        pCanvas.height = noiseTileSize;
        
        const imgData = pCtx.createImageData(noiseTileSize, noiseTileSize);
        for (let i = 0; i < imgData.data.length; i += 4) {
            const val = Math.random() * 255;
            imgData.data[i] = val;       // R
            imgData.data[i+1] = val;     // G
            imgData.data[i+2] = val;     // B
            imgData.data[i+3] = 255;     // A
        }
        pCtx.putImageData(imgData, 0, 0);
    }

    // Apply the pattern overlay to the main canvas
    ctx.globalAlpha = Math.max(0, Math.min(1, Number(intensity) !== null ? Number(intensity) : 0.5));
    
    // For photographic noise, overlay blend mode often looks much softer and more realistic
    if (pt === "noise") {
        ctx.globalCompositeOperation = "overlay";
    } else {
        ctx.globalCompositeOperation = "source-over";
    }

    const pattern = ctx.createPattern(pCanvas, "repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, width, height);

    // Reset composite operations before returning
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = "source-over";

    return canvas;
}