Image Symbol And Shape Creator

/**
 * Overlays a specified symbol or shape onto an image.
 *
 * @param {Image} originalImg The original image object to draw upon.
 * @param {string} shape The type of shape to draw. Supported values: 'circle', 'rectangle', 'triangle', 'star', 'text'. Defaults to 'circle'.
 * @param {string} shapeColor The fill color of the shape (e.g., 'red', '#FF0000', 'rgba(255, 0, 0, 0.5)'). Defaults to 'rgba(255, 0, 0, 0.5)'.
 * @param {number} shapeSize The size of the shape. For a circle, this is the radius. For a rectangle, it's the side length. For others, it's a general scale factor. Defaults to 50.
 * @param {number} positionX The x-coordinate for the center of the shape. Defaults to the horizontal center of the image.
 * @param {number} positionY The y-coordinate for the center of the shape. Defaults to the vertical center of the image.
 * @param {number} rotation The rotation of the shape in degrees. Defaults to 0.
 * @param {string} text The text to display if the shape is 'text'. Defaults to 'Symbol'.
 * @param {string} textFont The CSS font property for the text (e.g., 'bold 48px Arial'). Defaults to '30px Arial'.
 * @param {string} strokeColor The color of the shape's outline. Defaults to 'black'.
 * @param {number} strokeWidth The width of the shape's outline. Set to 0 for no outline. Defaults to 2.
 * @returns {HTMLCanvasElement} A canvas element with the original image and the new shape drawn on it.
 */
function processImage(originalImg, shape = 'circle', shapeColor = 'rgba(255, 0, 0, 0.5)', shapeSize = 50, positionX = -1, positionY = -1, rotation = 0, text = 'Symbol', textFont = '30px Arial', strokeColor = 'black', strokeWidth = 2) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    canvas.width = w;
    canvas.height = h;

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

    // Set default positions to the center if not provided
    const centerX = (positionX === -1) ? w / 2 : positionX;
    const centerY = (positionY === -1) ? h / 2 : positionY;

    // Set drawing styles
    ctx.fillStyle = shapeColor;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;

    // Save context state before applying transformations
    ctx.save();

    // Translate and rotate context
    ctx.translate(centerX, centerY);
    ctx.rotate(rotation * Math.PI / 180);

    // Begin drawing path
    ctx.beginPath();

    switch (shape.toLowerCase()) {
        case 'circle':
            ctx.arc(0, 0, shapeSize, 0, 2 * Math.PI);
            break;

        case 'rectangle':
            ctx.rect(-shapeSize / 2, -shapeSize / 2, shapeSize, shapeSize);
            break;

        case 'triangle':
            {
                const height = shapeSize * (Math.sqrt(3) / 2);
                const R = (2 / 3) * height; // distance from centroid to vertex
                const r = (1 / 3) * height; // distance from centroid to side
                ctx.moveTo(0, -R);
                ctx.lineTo(-shapeSize / 2, r);
                ctx.lineTo(shapeSize / 2, r);
                ctx.closePath();
                break;
            }

        case 'star':
            {
                const spikes = 5;
                const outerRadius = shapeSize;
                const innerRadius = shapeSize / 2;
                let rot = Math.PI / 2 * 3;
                let x, y;
                const step = Math.PI / spikes;

                ctx.moveTo(0, -outerRadius);
                for (let i = 0; i < spikes; i++) {
                    // Outer point
                    x = Math.cos(rot) * outerRadius;
                    y = Math.sin(rot) * outerRadius;
                    ctx.lineTo(x, y);
                    rot += step;

                    // Inner point
                    x = Math.cos(rot) * innerRadius;
                    y = Math.sin(rot) * innerRadius;
                    ctx.lineTo(x, y);
                    rot += step;
                }
                ctx.lineTo(0, -outerRadius);
                ctx.closePath();
                break;
            }

        case 'text':
            // Text is handled separately as it doesn't use ctx.fill/stroke on a path
            ctx.font = textFont;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(text, 0, 0);
            if (strokeWidth > 0) {
                ctx.strokeText(text, 0, 0);
            }
            // Since we handled drawing, we skip the generic fill/stroke below
            ctx.restore();
            return canvas;

        default:
            console.warn(`Shape "${shape}" not recognized. Drawing a circle instead.`);
            ctx.arc(0, 0, shapeSize, 0, 2 * Math.PI);
            break;
    }

    // Apply fill and stroke
    ctx.fill();
    if (strokeWidth > 0) {
        ctx.stroke();
    }

    // Restore the context to its original state
    ctx.restore();

    return canvas;
}