Image Generator For Rainbow Six Siege Logo With Rainbow Fill

/**
 * Generates an image of the Rainbow Six Siege "6" logo with a rainbow-colored fill,
 * a black outline, and a black gun silhouette in the center, on a white background.
 * The originalImg parameter is not used as this function generates an image from scratch.
 *
 * @param {Image} originalImg - An unused Image object, included for consistency.
 * @returns {HTMLCanvasElement} A canvas element containing the generated logo.
 */
function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const size = 512;
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    // 1. Draw a white background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, size, size);

    // 2. Define the outer hexagon path for the logo shape
    // The points are calculated to create the characteristic vertically stretched hexagon.
    const hexagonPath = new Path2D();
    const cx = size / 2;
    const cy = size / 2;
    const halfWidth = size / 2 - 16;
    const topY = 10;
    const bottomY = size - 10;
    const sideTopY = size * 0.26;
    const sideBottomY = size * 0.74;

    hexagonPath.moveTo(cx, topY);
    hexagonPath.lineTo(cx + halfWidth, sideTopY);
    hexagonPath.lineTo(cx + halfWidth, sideBottomY);
    hexagonPath.lineTo(cx, bottomY);
    hexagonPath.lineTo(cx - halfWidth, sideBottomY);
    hexagonPath.lineTo(cx - halfWidth, sideTopY);
    hexagonPath.closePath();

    // 3. Create a vertical rainbow gradient for the fill
    const gradient = ctx.createLinearGradient(0, topY, 0, bottomY);
    gradient.addColorStop(0, '#FF0000'); // Red
    gradient.addColorStop(0.2, '#FF7F00'); // Orange
    gradient.addColorStop(0.4, '#FFFF00'); // Yellow
    gradient.addColorStop(0.6, '#00FF00'); // Green
    gradient.addColorStop(0.8, '#0000FF'); // Blue
    gradient.addColorStop(1, '#8B00FF'); // Violet

    // 4. Fill the hexagon with the rainbow gradient
    ctx.fillStyle = gradient;
    ctx.fill(hexagonPath);

    // 5. Draw a thick black outline for the hexagon
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 18;
    ctx.lineJoin = 'round'; // Use round joins for smoother corners
    ctx.stroke(hexagonPath);

    // 6. Draw the black gun silhouette in the center
    ctx.save();
    ctx.fillStyle = 'black';
    // Center the drawing context to make drawing the gun with relative coordinates easier
    ctx.translate(cx, cy);

    // -- Gun Drawing Start --
    // A stylized assault rifle silhouette drawn with basic shapes.
    // Parts are drawn from back to front to ensure correct layering.
    // A scale factor is used to easily resize the entire gun if needed.
    const scale = 0.9;

    // Stock
    ctx.beginPath();
    ctx.moveTo(100 * scale, 12 * scale);
    ctx.lineTo(180 * scale, 12 * scale);
    ctx.lineTo(200 * scale, 45 * scale);
    ctx.lineTo(185 * scale, 50 * scale);
    ctx.lineTo(170 * scale, 25 * scale);
    ctx.lineTo(125 * scale, 25 * scale);
    ctx.closePath();
    ctx.fill();

    // Grip
    ctx.beginPath();
    ctx.moveTo(75 * scale, 12 * scale);
    ctx.lineTo(95 * scale, 12 * scale);
    ctx.lineTo(115 * scale, 70 * scale);
    ctx.lineTo(90 * scale, 70 * scale);
    ctx.closePath();
    ctx.fill();

    // Main Body (receiver, barrel, handguard)
    ctx.fillRect(-180 * scale, -15 * scale, 280 * scale, 30 * scale);

    // Magazine
    ctx.beginPath();
    ctx.moveTo(5 * scale, 15 * scale);
    ctx.lineTo(40 * scale, 15 * scale);
    ctx.lineTo(30 * scale, 85 * scale);
    ctx.lineTo(-5 * scale, 85 * scale);
    ctx.closePath();
    ctx.fill();

    // Sights / Carry Handle
    ctx.fillRect(-70 * scale, -35 * scale, 130 * scale, 12 * scale);
    // Front sight post
    ctx.fillRect(-175 * scale, -28 * scale, 15 * scale, 13 * scale);
    // -- Gun Drawing End --

    ctx.restore();

    // Return the final canvas element
    return canvas;
}