Image Texture Overlay Adder

function processImage(
    originalImg, 
    textureType = "noise", 
    opacity = 0.3, 
    blendMode = "multiply", 
    textureColor = "#000000", 
    textureScale = 1
) {
    const canvas = document.createElement("canvas");
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext("2d");

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

    // Create a temporary canvas for generating the repeating texture pattern
    const texCanvas = document.createElement("canvas");
    const tCtx = texCanvas.getContext("2d");

    textureType = textureType.toLowerCase();

    if (textureType === "grid") {
        texCanvas.width = 20;
        texCanvas.height = 20;
        tCtx.strokeStyle = textureColor;
        tCtx.lineWidth = 1;
        tCtx.strokeRect(0, 0, 20, 20);
    } else if (textureType === "lines") {
        texCanvas.width = 4;
        texCanvas.height = 4;
        tCtx.fillStyle = textureColor;
        // Drawing horizontal scanlines
        tCtx.fillRect(0, 0, 4, 2);
    } else if (textureType === "dots") {
        texCanvas.width = 16;
        texCanvas.height = 16;
        tCtx.fillStyle = textureColor;
        tCtx.beginPath();
        tCtx.arc(8, 8, 3, 0, Math.PI * 2);
        tCtx.fill();
    } else if (textureType === "fabric") {
        texCanvas.width = 8;
        texCanvas.height = 8;
        tCtx.fillStyle = textureColor;
        tCtx.globalAlpha = 0.5;
        tCtx.fillRect(0, 0, 2, 8); // Warp
        tCtx.fillRect(0, 0, 8, 2); // Weft
        tCtx.globalAlpha = 1.0;
    } else {
        // Default to "noise" (Film grain simulation)
        // Ignoring textureColor here to enforce standard grayscale monochrome noise
        texCanvas.width = 256;
        texCanvas.height = 256;
        const imgData = tCtx.createImageData(256, 256);
        for (let i = 0; i < imgData.data.length; i += 4) {
            // Generate random grayscale pixel
            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;   // Alpha opaque (transparency is handled contextually)
        }
        tCtx.putImageData(imgData, 0, 0);
    }

    // Prepare context for texture overlay
    ctx.globalCompositeOperation = blendMode;
    // Ensure opacity stays within 0 - 1 limits
    ctx.globalAlpha = Math.max(0, Math.min(1, opacity));

    // Create the repeating pattern and apply it
    const pattern = ctx.createPattern(texCanvas, "repeat");
    ctx.fillStyle = pattern;

    // Save context to apply scaling if necessary
    ctx.save();
    
    // Scale the context matrix so the pattern scales seamlessly
    const safeScale = (textureScale > 0) ? textureScale : 1;
    if (safeScale !== 1) {
        ctx.scale(safeScale, safeScale);
    }
    
    // Fill the scaled context area to cover the original image completely
    ctx.fillRect(0, 0, width / safeScale, height / safeScale);
    
    // Restore context adjustments
    ctx.restore();

    // Reset global settings for future proofing the returned canvas context state
    ctx.globalAlpha = 1.0;
    ctx.globalCompositeOperation = "source-over";

    return canvas;
}