Image Training Tool

function processImage(originalImg, columns = "5", rows = "5", gridColor = "#ff0000", lineThickness = "2", drawLabels = "yes") {
    // A drawing trainer (grid method) tool that overlays a configurable grid with labels 
    // to help artists train their proportions and referencing skills.
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);
    
    const numCols = Math.max(1, parseInt(columns) || 5);
    const numRows = Math.max(1, parseInt(rows) || 5);
    const thickness = Math.max(0.1, parseFloat(lineThickness) || 2);
    
    const cellWidth = canvas.width / numCols;
    const cellHeight = canvas.height / numRows;
    
    // Draw the grid lines
    ctx.strokeStyle = gridColor;
    ctx.lineWidth = thickness;
    ctx.beginPath();
    
    // Vertical lines
    for (let i = 1; i < numCols; i++) {
        ctx.moveTo(i * cellWidth, 0);
        ctx.lineTo(i * cellWidth, canvas.height);
    }
    
    // Horizontal lines
    for (let i = 1; i < numRows; i++) {
        ctx.moveTo(0, i * cellHeight);
        ctx.lineTo(canvas.width, i * cellHeight);
    }
    
    ctx.stroke();
    
    // Draw grid labels if enabled
    const showLabels = drawLabels.toLowerCase() === "yes" || drawLabels === "1" || drawLabels === "true";
    if (showLabels) {
        // Dynamically adjust font size based on cell dimensions
        const fontSize = Math.max(12, Math.min(cellWidth, cellHeight) * 0.25);
        ctx.font = `bold ${fontSize}px sans-serif`;
        ctx.textAlign = "left";
        ctx.textBaseline = "top";
        
        for (let r = 0; r < numRows; r++) {
            for (let c = 0; c < numCols; c++) {
                // We only label the top row and left column to keep the grid clear
                if (r === 0 || c === 0) {
                    let label = "";
                    
                    if (r === 0 && c === 0) {
                        label = "A1";
                    } else if (r === 0) {
                        // Generate column letters (A, B, C... Z, AA, AB...)
                        let colIndex = c;
                        while (colIndex >= 0) {
                            label = String.fromCharCode(65 + (colIndex % 26)) + label;
                            colIndex = Math.floor(colIndex / 26) - 1;
                        }
                    } else if (c === 0) {
                        // Generate row numbers (2, 3, 4...)
                        label = (r + 1).toString();
                    }
                    
                    const textX = c * cellWidth + cellWidth * 0.05;
                    const textY = r * cellHeight + cellHeight * 0.05;
                    
                    // Add a white stroke around text so it contrasts well against any image background
                    ctx.lineWidth = Math.max(1, fontSize * 0.15);
                    ctx.strokeStyle = "#ffffff";
                    ctx.strokeText(label, textX, textY);
                    
                    // Fill the text with the grid color
                    ctx.fillStyle = gridColor;
                    ctx.fillText(label, textX, textY);
                }
            }
        }
    }
    
    return canvas;
}