Image Taker

/**
 * Takes a "bite" out of an image, inspired by the Russian word "Жадина" (greedy person).
 * This function cuts a circular piece from the edge or corner of the image.
 *
 * @param {Image} originalImg The original javascript Image object to process.
 * @param {string} bitePosition The position where the bite should be taken.
 *   Valid values: 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left'.
 *   Defaults to 'right'.
 * @param {number} biteSize The size of the bite as a fraction of the image's smaller dimension.
 *   For example, 0.2 means the bite radius will be 20% of the smaller side of the image.
 *   Defaults to 0.2.
 * @returns {HTMLCanvasElement} A new canvas element with the bite taken out.
 */
function processImage(originalImg, bitePosition = 'right', biteSize = 0.2) {
    // 1. Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // 4. Set the composite operation to 'destination-out'.
    // This makes subsequent drawings erase the existing content where they overlap.
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'black'; // Color doesn't matter, but it needs a fill style

    // 5. Calculate the parameters for the bite mark
    const radius = Math.min(width, height) * Number(biteSize);
    let centerX, centerY;

    // Determine the center of the circular bite based on the position string
    switch (bitePosition.toLowerCase()) {
        case 'top':
            centerX = width / 2;
            centerY = 0;
            break;
        case 'top-right':
            centerX = width;
            centerY = 0;
            break;
        case 'bottom-right':
            centerX = width;
            centerY = height;
            break;
        case 'bottom':
            centerX = width / 2;
            centerY = height;
            break;
        case 'bottom-left':
            centerX = 0;
            centerY = height;
            break;
        case 'left':
            centerX = 0;
            centerY = height / 2;
            break;
        case 'top-left':
            centerX = 0;
            centerY = 0;
            break;
        case 'right':
        default:
            centerX = width;
            centerY = height / 2;
            break;
    }

    // 6. Draw the circular bite to erase a part of the image
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.fill();

    // 7. Reset the composite operation to default
    ctx.globalCompositeOperation = 'source-over';

    // 8. Return the modified canvas
    return canvas;
}