X Got Confused Image Effect Generator

function processImage(originalImg, overlayOpacity = "0.65", mathColor = "#FFFFFF") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const W = originalImg.width;
    const H = originalImg.height;
    canvas.width = W;
    canvas.height = H;
    
    // Draw the original image as the background
    ctx.drawImage(originalImg, 0, 0);
    
    // Parse parameters
    const opacity = parseFloat(overlayOpacity) || 0.65;
    
    // Calculate a dynamic scale based on the image's dimensions
    const scale = Math.sqrt(W * H);
    let fontSize = Math.max(12, scale * 0.04);
    
    // Set up canvas styling for the "Confused Math" overlay
    ctx.globalAlpha = opacity;
    ctx.fillStyle = mathColor;
    ctx.strokeStyle = mathColor;
    ctx.lineWidth = Math.max(1, scale * 0.004);
    
    // Add text shadow to ensure contrast and visibility on both dark and bright areas
    const isBrightColor = (mathColor === "#FFFFFF" || mathColor.toLowerCase() === "white");
    ctx.shadowColor = isBrightColor ? 'rgba(0, 0, 0, 0.85)' : 'rgba(255, 255, 255, 0.85)';
    ctx.shadowBlur = fontSize * 0.3;
    
    // Define an array of recognizable math equations and question marks
    const layoutItems = [
        { t: "x = \u200E( -b \u00B1 \u221A(b\u00B2 - 4ac) ) / 2a", x: 0.05, y: 0.15, a: -0.08 },
        { t: "\u222B e^x dx = e^x + C", x: 0.60, y: 0.18, a: 0.05 },
        { t: "sin\u00B2\u03B8 + cos\u00B2\u03B8 = 1", x: 0.12, y: 0.85, a: -0.05 },
        { t: "E = mc\u00B2", x: 0.75, y: 0.75, a: 0.12 },
        { t: "c\u00B2 = a\u00B2 + b\u00B2 - 2ab cos(C)", x: 0.40, y: 0.50, a: 0.02 },
        { t: "\u2207 \u00D7 B = \u03BC\u2080 (J + \u03B5\u2080 \u2202E/\u2202t)", x: 0.35, y: 0.95, a: 0 },
        { t: "f(x) = \u2211(x\u1D62 - \u03BC)\u00B2", x: 0.08, y: 0.45, a: -0.15 },
        { t: "???", x: 0.80, y: 0.30, a: 0.18, sz: 1.5, type: 'q' },
        { t: "?", x: 0.25, y: 0.35, a: -0.20, sz: 2.2, type: 'q' },
        { t: "??", x: 0.50, y: 0.20, a: 0.10, sz: 1.8, type: 'q' },
        { t: "?!", x: 0.15, y: 0.65, a: 0.25, sz: 1.6, type: 'q' }
    ];

    // Render Text Expressions
    layoutItems.forEach(item => {
        ctx.save();
        ctx.translate(W * item.x, H * item.y);
        if (item.a) ctx.rotate(item.a);
        
        const sizeMult = item.sz || 1;
        const family = item.type === 'q' ? '"Arial", sans-serif' : '"Times New Roman", Times, serif';
        const weight = item.type === 'q' ? 'bold ' : 'italic ';
        
        ctx.font = `${weight}${fontSize * sizeMult}px ${family}`;
        ctx.fillText(item.t, 0, 0);
        ctx.restore();
    });

    // Disable shadow for geometric drawings to keep them crisp
    ctx.shadowColor = 'transparent';

    // Shape 1: Right-Angle Triangle Geometry Component
    ctx.save();
    ctx.translate(W * 0.70, H * 0.42);
    ctx.rotate(0.1);
    ctx.beginPath();
    const triSz = scale * 0.12;
    ctx.moveTo(0, 0);                 // bottom left
    ctx.lineTo(triSz, 0);             // bottom right
    ctx.lineTo(triSz, -triSz * 0.75); // top right
    ctx.closePath();
    ctx.stroke();
    // Square symbol for the right angle
    const sqSz = triSz * 0.12;
    ctx.strokeRect(triSz - sqSz, -sqSz, sqSz, sqSz);
    // Draw labels
    ctx.font = `italic ${fontSize * 0.6}px "Times New Roman", serif`;
    ctx.fillText("a", triSz - sqSz * 4, -sqSz);
    ctx.fillText("b", triSz + sqSz, -triSz * 0.35);
    ctx.fillText("c", triSz * 0.3, -triSz * 0.4);
    ctx.restore();

    // Shape 2: A Coordinate System Graph with a Parabola
    ctx.save();
    ctx.translate(W * 0.85, H * 0.10);
    ctx.beginPath();
    const axSz = scale * 0.10;
    // Axes
    ctx.moveTo(0, axSz * 0.3);
    ctx.lineTo(0, -axSz);
    ctx.moveTo(-axSz * 0.3, 0);
    ctx.lineTo(axSz * 1.2, 0);
    ctx.stroke();
    // Plot imaginary parabola y = cx^2
    ctx.beginPath();
    ctx.moveTo(-axSz * 0.3, -(axSz * 0.3 * axSz * 0.3) / (axSz * 0.5));
    for (let i = -axSz * 0.3; i <= axSz; i += axSz / 20) {
        let py = -(i * i) / (axSz * 0.5); 
        ctx.lineTo(i, py);
    }
    ctx.stroke();
    ctx.fillText("y", -axSz * 0.2, -axSz * 0.9);
    ctx.fillText("x", axSz * 1.1, axSz * 0.2);
    ctx.restore();

    // Shape 3: Geometric Circle with Radius and Angle
    ctx.save();
    ctx.translate(W * 0.2, H * 0.90);
    ctx.beginPath();
    const r = scale * 0.08;
    ctx.arc(0, 0, r, 0, Math.PI * 2);
    ctx.stroke();
    // Center point & lines
    ctx.beginPath();
    ctx.arc(0, 0, 2, 0, Math.PI * 2);
    ctx.fill();
    ctx.moveTo(0, 0);
    ctx.lineTo(r, 0); // Horizontal radius
    ctx.moveTo(0, 0);
    const angle = -0.6; // Angle in radians
    ctx.lineTo(r * Math.cos(angle), r * Math.sin(angle)); // Diagonal radius
    ctx.stroke();
    // Angle Arc
    ctx.beginPath();
    ctx.arc(0, 0, r * 0.3, angle, 0);
    ctx.stroke();
    ctx.fillText("\u03B1", r * 0.4, r * -0.15);
    ctx.restore();

    return canvas;
}