Image Chess Board Filter Effect Tool

function processImage(originalImg, squareSize = 20) {
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    const canvas = document.createElement('canvas');
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Handle cases where the image might not be loaded or has no dimensions
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Original image has zero dimensions or is not loaded. Returning an empty canvas.");
        // Return an empty (0x0 or as per originalImg.width/height) canvas
        return canvas;
    }

    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    // Ensure squareSize is a positive number
    if (typeof squareSize !== 'number' || squareSize <= 0) {
        squareSize = 20; // Reset to default if invalid
    }

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

    try {
        // Get the pixel data from the canvas
        const imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
        const data = imageData.data;

        // Iterate over each pixel
        for (let y = 0; y < imgHeight; y++) {
            for (let x = 0; x < imgWidth; x++) {
                // Determine which square of the chessboard this pixel belongs to
                const squareCol = Math.floor(x / squareSize);
                const squareRow = Math.floor(y / squareSize);

                // Check if the current square is one of the alternating squares to be modified
                // (e.g., "black" squares in a chessboard pattern)
                // (squareCol + squareRow) % 2 === 0 targets one set of squares
                // (squareCol + squareRow) % 2 === 1 targets the other set
                if ((squareCol + squareRow) % 2 === 0) {
                    const index = (y * imgWidth + x) * 4; // Each pixel has 4 values (R, G, B, A)

                    const r = data[index];
                    const g = data[index + 1];
                    const b = data[index + 2];
                    // Alpha (data[index + 3]) will be preserved

                    // Apply the effect: convert the pixel to grayscale
                    const gray = 0.299 * r + 0.587 * g + 0.114 * b;

                    data[index] = gray;     // Red
                    data[index + 1] = gray; // Green
                    data[index + 2] = gray; // Blue
                }
            }
        }

        // Put the modified pixel data back onto the canvas
        ctx.putImageData(imageData, 0, 0);

    } catch (e) {
        console.error("Error applying chessboard filter: ", e);
        // This error can occur if the image is cross-origin and the canvas becomes tainted.
        // In this case, getImageData() will fail. The canvas will still have the original image
        // drawn on it (from the drawImage call before the try block), but it will be tainted.
        // The function is required to return a canvas, so we return it as is.
        // The developer using this function should be aware of CORS policies.
    }

    return canvas;
}