First In Orchestra Image Identifier

function processImage(originalImg, label = "O", boxColor = "#00FF00", overlayOpacity = 0.6) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const width = originalImg.width;
    const height = originalImg.height;
    
    canvas.width = width;
    canvas.height = height;
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);
    
    // Since "First in the orchestra" represents a classic riddle (the letter 'O' or an Oboe),
    // we simulate a computer vision identification bounding box centered on the image labeling the finding.
    const boxWidth = Math.min(width * 0.7, height * 0.7);
    const boxHeight = boxWidth;
    const x = (width - boxWidth) / 2;
    const y = (height - boxHeight) / 2;
    
    // Darken the outside of the bounding box to focus on the "identified" subject
    ctx.fillStyle = `rgba(0, 0, 0, ${overlayOpacity})`;
    ctx.fillRect(0, 0, width, y); // Top
    ctx.fillRect(0, y + boxHeight, width, height - (y + boxHeight)); // Bottom
    ctx.fillRect(0, y, x, boxHeight); // Left
    ctx.fillRect(x + boxWidth, y, width - (x + boxWidth), boxHeight); // Right
    
    // Draw the identifier bounding box
    ctx.strokeStyle = boxColor;
    ctx.lineWidth = Math.max(3, width * 0.01);
    ctx.strokeRect(x, y, boxWidth, boxHeight);
    
    // Add "scanning" horizontal line
    ctx.beginPath();
    ctx.moveTo(x, y + boxHeight / 2);
    ctx.lineTo(x + boxWidth, y + boxHeight / 2);
    ctx.strokeStyle = boxColor;
    ctx.globalAlpha = 0.5;
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.globalAlpha = 1.0;
    
    // Prepare the identification text
    // Defaulting to "O" as it is the literal "first in the orchestra" (the first letter)
    const text = `IDENTIFIED: ${label} (First in Orchestra)`;
    const fontSize = Math.max(16, width * 0.03);
    ctx.font = `bold ${fontSize}px Courier New, monospace`;
    ctx.textBaseline = 'bottom';
    
    const textWidth = ctx.measureText(text).width;
    const textPadding = 10;
    const textBgHeight = fontSize + textPadding * 2;
    const textY = y - 5;
    
    // Draw background for text to make it readable
    ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
    ctx.fillRect(x, textY - textBgHeight, textWidth + textPadding * 2, textBgHeight);
    
    // Draw the identification text
    ctx.fillStyle = boxColor;
    ctx.fillText(text, x + textPadding, textY - textPadding / 2);

    // Draw crosshairs at the corners of the box for effect
    const crosshairLen = boxWidth * 0.1;
    ctx.beginPath();
    // Top-Left
    ctx.moveTo(x - crosshairLen, y); ctx.lineTo(x, y);
    ctx.moveTo(x, y - crosshairLen); ctx.lineTo(x, y);
    // Top-Right
    ctx.moveTo(x + boxWidth, y - crosshairLen); ctx.lineTo(x + boxWidth, y);
    ctx.moveTo(x + boxWidth + crosshairLen, y); ctx.lineTo(x + boxWidth, y);
    // Bottom-Left
    ctx.moveTo(x - crosshairLen, y + boxHeight); ctx.lineTo(x, y + boxHeight);
    ctx.moveTo(x, y + boxHeight + crosshairLen); ctx.lineTo(x, y + boxHeight);
    // Bottom-Right
    ctx.moveTo(x + boxWidth + crosshairLen, y + boxHeight); ctx.lineTo(x + boxWidth, y + boxHeight);
    ctx.moveTo(x + boxWidth, y + boxHeight + crosshairLen); ctx.lineTo(x + boxWidth, y + boxHeight);
    
    ctx.strokeStyle = boxColor;
    ctx.stroke();

    return canvas;
}