Image Eight Setup Tool

function processImage(originalImg, fillMode = 'cover', backgroundColor = 'rgba(0, 0, 0, 0)', strokeColor = '#000000', strokeWidth = 0) {
    /**
     * This function interprets "Image Eight Setup Tool" and the description "8" by
     * taking an image and placing it within a clipping mask shaped like the number eight.
     * The resulting canvas has a 1:2 aspect ratio.
     *
     * @param {Image} originalImg - The source javascript Image object.
     * @param {string} fillMode - How the image should fill the shape ('cover', 'contain', 'stretch').
     * @param {string} backgroundColor - The background color of the canvas.
     * @param {string} strokeColor - The color of the border around the '8' shape.
     * @param {number} strokeWidth - The width of the border around the '8' shape.
     * @returns {HTMLCanvasElement} A canvas element with the image cropped to an '8' shape.
     */

    // Cap the maximum size to prevent creating a huge canvas from a very large image.
    const maxSize = 1024;
    const size = Math.min(originalImg.width, originalImg.height, maxSize);

    const canvas = document.createElement('canvas');
    // The output canvas has a 1:2 aspect ratio to nicely fit the '8' shape.
    canvas.width = size;
    canvas.height = size * 2;
    const ctx = canvas.getContext('2d');

    // 1. Fill background if one is provided.
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Define the geometry for the '8' shape.
    const radius = size / 2;
    const halfStroke = strokeWidth / 2;
    // The path is the centerline for the stroke. We calculate its radius so the
    // final stroked shape's outer edge aligns with the canvas boundaries.
    const pathRadius = Math.max(0, radius - halfStroke);

    // Centers for the two circles forming the '8'.
    const centerX = size / 2;
    const centerYTop = radius;
    const centerYBottom = radius * 3;

    // Only proceed if the shape has a radius to be drawn.
    if (pathRadius > 0) {
        // 3. Define the path for the shape. This path will be used for both clipping and stroking.
        ctx.beginPath();
        ctx.arc(centerX, centerYTop, pathRadius, 0, 2 * Math.PI, false);
        // Create the second circle as a separate sub-path.
        ctx.moveTo(centerX + pathRadius, centerYBottom);
        ctx.arc(centerX, centerYBottom, pathRadius, 0, 2 * Math.PI, false);

        // 4. Clip the context to the path and draw the image inside.
        ctx.save();
        ctx.clip();

        let drawWidth, drawHeight, offsetX, offsetY;

        if (fillMode === 'stretch') {
            drawWidth = canvas.width;
            drawHeight = canvas.height;
            offsetX = 0;
            offsetY = 0;
        } else { // Handles 'cover' and 'contain' modes.
            const imgRatio = originalImg.width / originalImg.height;
            // The canvas aspect ratio is always 0.5 (width / (2 * width)).
            const canvasRatio = 0.5;

            let scale;
            if (fillMode === 'cover') {
                // Scale to make the image large enough to cover the whole canvas.
                scale = Math.max(canvas.width / originalImg.width, canvas.height / originalImg.height);
            } else { // 'contain'
                // Scale to make the image small enough to fit entirely inside the canvas.
                scale = Math.min(canvas.width / originalImg.width, canvas.height / originalImg.height);
            }

            drawWidth = originalImg.width * scale;
            drawHeight = originalImg.height * scale;
            offsetX = (canvas.width - drawWidth) / 2;
            offsetY = (canvas.height - drawHeight) / 2;
        }

        ctx.drawImage(originalImg, offsetX, offsetY, drawWidth, drawHeight);

        // 5. Restore context to remove the clipping mask.
        ctx.restore();
    }


    // 6. Draw the stroke outline on top of the clipped image.
    if (strokeWidth > 0 && pathRadius > 0) {
        ctx.lineWidth = strokeWidth;
        ctx.strokeStyle = strokeColor;

        // The path must be redefined for stroking as clip() consumes the current path.
        ctx.beginPath();
        ctx.arc(centerX, centerYTop, pathRadius, 0, 2 * Math.PI, false);
        ctx.moveTo(centerX + pathRadius, centerYBottom);
        ctx.arc(centerX, centerYBottom, pathRadius, 0, 2 * Math.PI, false);
        ctx.stroke();
    }

    return canvas;
}