Image Fabric Texture Filter

function processImage(originalImg, weaveSize = 4, contrast = 20, grain = 10) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure the image is loaded and has dimensions
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    if (imgWidth === 0 || imgHeight === 0) {
        // Return an empty canvas or handle error if image has no size
        canvas.width = 0;
        canvas.height = 0;
        console.warn("Image has zero dimensions.");
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    const data = imageData.data;

    // Sanitize parameters
    const actualWeaveSize = Math.max(1, Math.floor(weaveSize));
    const actualContrast = Number(contrast);
    const actualGrain = Math.max(0, Number(grain));

    for (let y = 0; y < imgHeight; y++) {
        for (let x = 0; x < imgWidth; x++) {
            const index = (y * imgWidth + x) * 4;

            // Determine the base modification based on a block pattern (simulating weave)
            // This creates a checkerboard pattern of 'actualWeaveSize' x 'actualWeaveSize' blocks
            // which are either lightened or darkened.
            const isLightBlock = (Math.floor(x / actualWeaveSize) + Math.floor(y / actualWeaveSize)) % 2 === 0;
            const modification = isLightBlock ? actualContrast : -actualContrast;

            let r = data[index];
            let g = data[index + 1];
            let b = data[index + 2];

            // Apply contrast modification from the "weave"
            r += modification;
            g += modification;
            b += modification;

            // Apply grain/noise
            if (actualGrain > 0) {
                // Generate noise between -actualGrain and +actualGrain
                const noiseVal = (Math.random() * 2 - 1) * actualGrain;
                r += noiseVal;
                g += noiseVal;
                b += noiseVal;
            }

            // Clamp values to the 0-255 range
            data[index] = Math.max(0, Math.min(255, r));
            data[index + 1] = Math.max(0, Math.min(255, g));
            data[index + 2] = Math.max(0, Math.min(255, b));
            // Alpha channel (data[index + 3]) remains unchanged
        }
    }

    ctx.putImageData(imageData, 0, 0);
    return canvas;
}