Image Pixel Remover

/**
 * Removes pixels from an image in a checkerboard pattern.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @param {number} blockSize The size of the squares in the checkerboard pattern. A value of 1 will remove every other pixel. Default is 5.
 * @returns {HTMLCanvasElement} A new canvas element with the modified image.
 */
function processImage(originalImg, blockSize = 5) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions from the original image
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Set canvas dimensions
    canvas.width = width;
    canvas.height = height;

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

    // Get the image data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Ensure block size is a positive integer
    const size = Math.max(1, Math.floor(blockSize));

    // Iterate over each pixel of the image
    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            // Determine which block the current pixel belongs to
            const blockX = Math.floor(x / size);
            const blockY = Math.floor(y / size);

            // Create a checkerboard pattern. If the sum of block coordinates is even,
            // make the pixels in that block transparent.
            if ((blockX + blockY) % 2 === 0) {
                // Calculate the index of the alpha component for the current pixel
                // Each pixel has 4 components: R, G, B, A
                const alphaIndex = (y * width + x) * 4 + 3;

                // Set the alpha value to 0 to make the pixel fully transparent
                data[alphaIndex] = 0;
            }
        }
    }

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

    // Return the canvas with the pixel-removed image
    return canvas;
}