Google Identifier Image Drag And Drop Tool

function processImage(originalImg, markerColor = "#EA4335", outputSize = 512, imageScale = 1.0) {
    const canvas = document.createElement('canvas');
    // Ensure outputSize is properly parsed to a number
    const size = parseInt(outputSize) || 512;
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    // Scale canvas context to match the 480x480 working coordinate system
    const scaleFactor = size / 480;
    ctx.scale(scaleFactor, scaleFactor);

    // 1. Draw the shadow for the map marker to give it depth
    ctx.shadowColor = 'rgba(0, 0, 0, 0.25)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetY = 12;
    ctx.shadowOffsetX = 0;

    // 2. Map Pin Path Coordinates (Mimics a standard Google Maps style identifier marker)
    ctx.beginPath();
    // Start at top center
    ctx.moveTo(240, 40);
    // Top-left quadrant of the circle
    ctx.bezierCurveTo(162.7, 40, 100, 102.7, 100, 180);
    // Left side sweeping down to the bottom tip
    ctx.bezierCurveTo(100, 285, 240, 440, 240, 440);
    // Right side sweeping back up to the right edge of the circle
    ctx.bezierCurveTo(240, 440, 380, 285, 380, 180);
    // Top-right quadrant
    ctx.bezierCurveTo(380, 102.7, 317.3, 40, 240, 40);
    ctx.closePath();

    ctx.fillStyle = markerColor;
    ctx.fill();

    // Reset shadow for internal elements
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetY = 0;

    const innerCenterY = 180;
    const innerCenterX = 240;
    const whiteRadius = 90;

    // 3. Draw the white inner circle backdrop for the identifier
    ctx.beginPath();
    ctx.arc(innerCenterX, innerCenterY, whiteRadius, 0, Math.PI * 2);
    ctx.fillStyle = '#FFFFFF';
    ctx.fill();

    // 4. Draw the original image inside the white circle
    ctx.save();
    
    // Create a circular clipping mask (0.9 creates a nice white border; scaled by user input)
    const clipRadius = whiteRadius * 0.9 * Number(imageScale);
    ctx.beginPath();
    ctx.arc(innerCenterX, innerCenterY, clipRadius, 0, Math.PI * 2);
    ctx.clip();

    // Determine dimensions to emulate 'object-fit: cover' behavior
    const imgAspect = originalImg.width / originalImg.height;
    let dw, dh;
    
    // Wider than it is tall
    if (imgAspect > 1) {
        dh = clipRadius * 2;
        dw = dh * imgAspect;
    } 
    // Taller than it is wide, or perfectly square
    else {
        dw = clipRadius * 2;
        dh = dw / imgAspect;
    }

    // Draw the image perfectly centered inside the mask
    ctx.drawImage(
        originalImg,
        innerCenterX - dw / 2, 
        innerCenterY - dh / 2, 
        dw, 
        dh
    );
    
    ctx.restore();

    return canvas;
}