Image I Killed X Effect Generator

function processImage(originalImg, targetName = "X", lineColor = "rgba(220, 20, 20, 0.85)", lineWidthPercent = 5, applyGrayscale = 1, showText = 1) {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the original image
    ctx.drawImage(originalImg, 0, 0);

    // Turn image to grayscale to emphasize the "killed" effect (optional, handled by applyGrayscale parameter)
    if (Number(applyGrayscale) === 1) {
        try {
            const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imgData.data;
            for (let i = 0; i < data.length; i += 4) {
                // Standard grayscale luminosity conversion
                const brightness = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
                data[i] = brightness;     // R
                data[i + 1] = brightness; // G
                data[i + 2] = brightness; // B
            }
            ctx.putImageData(imgData, 0, 0);
        } catch (e) {
            console.warn("Could not apply grayscale due to CORS restrictions on the image.");
        }
    }

    // Calculate dimensions for the X
    const thickness = ((canvas.width + canvas.height) / 2) * (Number(lineWidthPercent) / 100);
    const padding = Math.min(canvas.width, canvas.height) * 0.1; 

    // Add shadow for a more dramatic, stamped/painted effect
    ctx.shadowColor = "rgba(0, 0, 0, 0.7)";
    ctx.shadowBlur = Math.max(5, thickness * 0.5);

    // Draw the massive Red 'X' signifying "Killed"
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = thickness;
    ctx.lineCap = "round";

    // Top-left to Bottom-right
    ctx.beginPath();
    ctx.moveTo(padding, padding);
    ctx.lineTo(canvas.width - padding, canvas.height - padding);
    ctx.stroke();

    // Top-right to Bottom-left
    ctx.beginPath();
    ctx.moveTo(canvas.width - padding, padding);
    ctx.lineTo(padding, canvas.height - padding);
    ctx.stroke();
    
    // Clear shadow for text drawing
    ctx.shadowColor = "transparent";
    ctx.shadowBlur = 0;

    // Optionally draw the "I KILLED X" text
    if (Number(showText) === 1 && targetName.trim() !== "") {
        const text = targetName.toLowerCase() === "x" ? "I KILLED X" : `I KILLED ${targetName.toUpperCase()}`;
        
        ctx.fillStyle = lineColor.replace(/[\d\.]+\)$/, '1)'); // Try to make the text fully opaque
        ctx.strokeStyle = "#000000";
        
        const fontSize = Math.max(canvas.width, canvas.height) * 0.08;
        ctx.lineWidth = fontSize * 0.05;
        ctx.font = `bold ${fontSize}px Impact, "Arial Black", sans-serif`;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";

        const textX = canvas.width / 2;
        const textY = canvas.height - (canvas.height * 0.15); // Place it near the bottom

        // Add a slight darkened background banner behind text for better readability
        ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
        ctx.fillRect(0, textY - (fontSize * 0.6), canvas.width, fontSize * 1.2);

        // Draw text
        ctx.fillStyle = "#ff0000";
        ctx.strokeText(text, textX, textY);
        ctx.fillText(text, textX, textY);
    }

    return canvas;
}