function processImage(originalImg, columns = 8, rows = 8, darkSquareColor = 'rgba(0, 0, 0, 0.6)', lightSquareColor = 'rgba(255, 255, 255, 0.2)', forceSquares = 1) {
// Parse numeric arguments just in case they are provided as strings
columns = Number(columns) || 8;
rows = Number(rows) || 8;
forceSquares = Number(forceSquares);
// Set up the canvas matching the image dimensions
const canvas = document.createElement('canvas');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
const ctx = canvas.getContext('2d');
// Draw the original image onto the background
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
// Calculate grid dimensions
const cellWidth = canvas.width / columns;
let cellHeight = canvas.height / rows;
let actualRows = rows;
// If forceSquares is 1, override row settings to ensure grid cells are perfect squares
if (forceSquares === 1) {
cellHeight = cellWidth;
actualRows = Math.ceil(canvas.height / cellHeight);
}
// Overlay the chess / checkerboard pattern
for (let r = 0; r < actualRows; r++) {
for (let c = 0; c < columns; c++) {
// Determine square color based on row and column index (chess pattern)
const isDarkSquare = (r + c) % 2 === 0;
const fillColor = isDarkSquare ? darkSquareColor : lightSquareColor;
// Optimization: Skip drawing if the color is fully transparent
if (fillColor.trim() !== 'transparent' && fillColor.trim() !== 'rgba(0,0,0,0)' && fillColor.trim() !== 'rgba(255,255,255,0)') {
ctx.fillStyle = fillColor;
ctx.fillRect(c * cellWidth, r * cellHeight, cellWidth, cellHeight);
}
}
}
return canvas;
}The Chess Image Generator allows you to overlay a customizable checkerboard pattern onto any image. Users can adjust the number of columns and rows to change the grid density, and modify the colors of the light and dark squares to achieve different transparency and aesthetic effects. This tool is useful for creating stylistic overlays for graphic design, generating textured backgrounds, or adding chessboard-themed patterns to digital art and social media content.