Image About Hospital

/**
 * Applies a "hospital" theme to an image by adding a color overlay,
 * a medical cross symbol, and an EKG (heartbeat) line.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {string} [overlayColor='rgba(173, 216, 230, 0.2)'] The color and opacity of the sterile-looking overlay.
 * @param {string} [crossColor='#d90429'] The color of the medical cross symbol.
 * @param {string} [ekgColor='rgba(239, 35, 60, 0.8)'] The color and opacity of the EKG line.
 * @param {number} [crossSize=0.15] The size of the cross relative to the smaller dimension of the image (e.g., 0.15 is 15%).
 * @returns {HTMLCanvasElement} A new canvas element with the hospital-themed image.
 */
function processImage(originalImg, overlayColor = 'rgba(173, 216, 230, 0.2)', crossColor = '#d90429', ekgColor = 'rgba(239, 35, 60, 0.8)', crossSize = 0.15) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

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

    // 2. Apply a cool, sterile color overlay
    if (overlayColor && overlayColor !== 'transparent') {
        ctx.fillStyle = overlayColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // 3. Draw a medical cross symbol in the top-right corner
    const size = Math.min(canvas.width, canvas.height) * crossSize;
    const margin = size * 0.2;
    const x = canvas.width - size - margin;
    const y = margin;
    const barWidth = size / 3;

    ctx.fillStyle = crossColor;
    // Vertical bar
    ctx.fillRect(x + barWidth, y, barWidth, size);
    // Horizontal bar
    ctx.fillRect(x, y + barWidth, size, barWidth);


    // 4. Draw a repeating EKG (heartbeat) line across the image
    ctx.strokeStyle = ekgColor;
    ctx.lineWidth = Math.max(2, canvas.width / 250); // Make line width responsive
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';

    const yBase = canvas.height * 0.75;
    const segmentLength = canvas.width / 4; // Length of one heartbeat cycle
    const amplitude = canvas.height * 0.08;

    ctx.beginPath();
    ctx.moveTo(-ctx.lineWidth, yBase); // Start slightly off-canvas for a clean edge

    let currentX = 0;
    while (currentX < canvas.width + segmentLength) { // Draw one segment past the edge
        // Flat line
        ctx.lineTo(currentX + segmentLength * 0.35, yBase);
        // P wave (small bump)
        ctx.quadraticCurveTo(currentX + segmentLength * 0.4, yBase - amplitude * 0.2, currentX + segmentLength * 0.45, yBase);
        // Line to Q
        ctx.lineTo(currentX + segmentLength * 0.5, yBase);
        // QRS complex (the spike)
        ctx.lineTo(currentX + segmentLength * 0.55, yBase + amplitude * 0.3); // Q
        ctx.lineTo(currentX + segmentLength * 0.625, yBase - amplitude); // R
        ctx.lineTo(currentX + segmentLength * 0.7, yBase + amplitude * 1.2); // S
        ctx.lineTo(currentX + segmentLength * 0.75, yBase);
        // T wave (medium bump)
        ctx.quadraticCurveTo(currentX + segmentLength * 0.85, yBase - amplitude * 0.5, currentX + segmentLength * 0.95, yBase);
        // Flat line to end of segment
        ctx.lineTo(currentX + segmentLength, yBase);

        currentX += segmentLength;
    }
    ctx.stroke();


    return canvas;
}