Image Product Store

async function processImage(originalImg, productName = 'Fresh Product', price = 1.99, currency = '$', saleText = 'SPECIAL OFFER!') {

    // Helper function to draw a star shape
    const drawStar = (ctx, cx, cy, spikes, outerRadius, innerRadius) => {
        let rot = Math.PI / 2 * 3;
        let x = cx;
        let y = cy;
        const step = Math.PI / spikes;

        ctx.beginPath();
        ctx.moveTo(cx, cy - outerRadius);
        for (let i = 0; i < spikes; i++) {
            x = cx + Math.cos(rot) * outerRadius;
            y = cy + Math.sin(rot) * outerRadius;
            ctx.lineTo(x, y);
            rot += step;

            x = cx + Math.cos(rot) * innerRadius;
            y = cy + Math.sin(rot) * innerRadius;
            ctx.lineTo(x, y);
            rot += step;
        }
        ctx.lineTo(cx, cy - outerRadius);
        ctx.closePath();
    };

    // Use the smaller dimension of the image to scale graphics proportionally
    const baseSize = Math.min(originalImg.width, originalImg.height);

    // Define layout parameters based on the image size
    const padding = baseSize * 0.1;
    const bottomMargin = baseSize * 0.3;

    // Create a canvas that's larger than the image to hold the store elements
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width + padding * 2;
    canvas.height = originalImg.height + padding + bottomMargin;
    const ctx = canvas.getContext('2d');

    // 1. Draw a clean white background
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Add a subtle border around the main image area
    ctx.strokeStyle = '#e0e0e0';
    ctx.lineWidth = 1;
    ctx.strokeRect(padding, padding, originalImg.width, originalImg.height);

    // 2. Draw the product image
    const imgX = padding;
    const imgY = padding;
    ctx.drawImage(originalImg, imgX, imgY);
    
    // Configure shadow for a pop-out effect
    const setShadow = () => {
        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
        ctx.shadowBlur = baseSize * 0.02;
        ctx.shadowOffsetX = baseSize * 0.01;
        ctx.shadowOffsetY = baseSize * 0.01;
    };
    
    const clearShadow = () => {
        ctx.shadowColor = 'transparent';
        ctx.shadowBlur = 0;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 0;
    };

    // 3. Draw the "Sale" starburst banner in the top-right corner
    const starOuterRadius = baseSize * 0.18;
    const starInnerRadius = baseSize * 0.10;
    const starX = canvas.width - padding - starOuterRadius;
    const starY = padding + starOuterRadius;

    setShadow();
    
    ctx.fillStyle = '#e52e2e'; // Sale Red
    ctx.strokeStyle = '#ffffff';
    ctx.lineWidth = baseSize * 0.01;
    drawStar(ctx, starX, starY, 14, starOuterRadius, starInnerRadius);
    ctx.fill();
    ctx.stroke();

    clearShadow();

    // Draw the sale text on the banner
    ctx.fillStyle = 'white';
    const saleFontSize = starOuterRadius * 0.25;
    ctx.font = `bold ${saleFontSize}px Arial, sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Simple text wrapping for the sale banner
    const words = saleText.toUpperCase().split(' ');
    const lineHeight = saleFontSize * 1.1;
    const startTextY = starY - (words.length - 1) * lineHeight / 2;
    words.forEach((word, i) => ctx.fillText(word, starX, startTextY + i * lineHeight));
    
    // 4. Draw the price tag circle in the bottom-left corner, overlapping the image
    const priceRadius = baseSize * 0.20;
    const priceX = padding + priceRadius;
    const priceY = padding + originalImg.height - priceRadius;

    setShadow();
    
    ctx.beginPath();
    ctx.arc(priceX, priceY, priceRadius, 0, Math.PI * 2);
    ctx.fillStyle = '#ffdd00'; // Bright Yellow
    ctx.fill();
    ctx.strokeStyle = '#333333';
    ctx.lineWidth = baseSize * 0.015;
    ctx.stroke();

    clearShadow();

    // Draw the price text inside the circle
    const priceString = currency + price.toFixed(2);
    ctx.fillStyle = '#333333';
    const priceFontSize = priceRadius * 0.6;
    ctx.font = `bold ${priceFontSize}px Impact, 'Arial Black', sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(priceString, priceX, priceY);

    // 5. Draw the product name at the bottom
    const nameFontSize = bottomMargin * 0.4;
    ctx.font = `bold ${nameFontSize}px Impact, 'Arial Black', sans-serif`;
    ctx.fillStyle = '#333333';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const nameY = canvas.height - (bottomMargin / 2);
    ctx.fillText(productName.toUpperCase(), canvas.width / 2, nameY);

    return canvas;
}