Image Rotator

function processImage(originalImg, angleDegrees = 90) {
    // Ensure angleDegrees is a valid number.
    // The default value is 90 if angleDegrees is undefined.
    // If angleDegrees is provided but is a string, Number() will parse it.
    // If it's a non-numeric string (e.g., "abc"), Number() results in NaN.
    let numericAngle = Number(angleDegrees);

    // If parsing results in NaN (e.g., from "abc"), fall back to the default angle.
    if (isNaN(numericAngle)) {
        numericAngle = 90; // Default angle
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const angleRadians = numericAngle * Math.PI / 180;

    const originalWidth = originalImg.width;
    const originalHeight = originalImg.height;

    // Handle cases where image might not have loaded or has zero dimensions
    if (originalWidth === 0 || originalHeight === 0) {
        // Return an empty or minimally sized canvas
        canvas.width = 0;
        canvas.height = 0;
        console.warn("Original image has zero dimensions. Returning an empty canvas.");
        return canvas;
    }

    // Calculate the dimensions of the bounding box for the rotated image
    const cosAngle = Math.cos(angleRadians);
    const sinAngle = Math.sin(angleRadians);
    const absCosAngle = Math.abs(cosAngle);
    const absSinAngle = Math.abs(sinAngle);

    const newCanvasWidth = originalWidth * absCosAngle + originalHeight * absSinAngle;
    const newCanvasHeight = originalWidth * absSinAngle + originalHeight * absCosAngle;

    // Set canvas dimensions, using Math.ceil to ensure the rotated image fits fully
    canvas.width = Math.ceil(newCanvasWidth);
    canvas.height = Math.ceil(newCanvasHeight);

    // Translate the canvas context to the center of the new canvas.
    // This point will be the center of rotation.
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // Rotate the canvas context by the desired angle.
    ctx.rotate(angleRadians);

    // Draw the original image onto the rotated canvas.
    // The image needs to be drawn centered around the new (0,0) point
    // (which is the canvas center due to the earlier translate).
    // So, its top-left corner is at (-originalWidth/2, -originalHeight/2).
    ctx.drawImage(originalImg, -originalWidth / 2, -originalHeight / 2, originalWidth, originalHeight);

    return canvas;
}