Image To Blueprint-Style Drawing Converter

/**
 * Converts an image into a technical blueprint-style drawing.
 *
 * @param {HTMLImageElement} originalImg The original image element to process.
 * @returns {HTMLCanvasElement} A new canvas element with the blueprint-style drawing.
 */
function processImage(originalImg) {
    // ---- Configuration for the blueprint style ----
    // This style is fixed to ensure consistency as per the description.
    const backgroundColor = '#002244'; // A classic dark blueprint blue.
    const gridColor = 'rgba(173, 216, 230, 0.2)'; // A subtle light blue grid.
    const lineColor = { r: 255, g: 255, b: 255 }; // Lines are always white.
    const gridSize = 20; // Size of the grid cells in pixels.
    const standardWidth = 1200; // Standard output width.
    const standardHeight = 800; // Standard output height.
    // ------------------------------------------------

    // 1. Create the main canvas that will be returned.
    const canvas = document.createElement('canvas');
    canvas.width = standardWidth;
    canvas.height = standardHeight;
    const ctx = canvas.getContext('2d');

    // 2. Draw the solid blue background.
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 3. Draw the subtle blueprint grid.
    ctx.strokeStyle = gridColor;
    ctx.lineWidth = 0.5;

    // Draw grid lines, offset by 0.5px for crispness.
    for (let x = 0.5; x <= canvas.width; x += gridSize) {
        ctx.beginPath();
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
        ctx.stroke();
    }
    for (let y = 0.5; y <= canvas.height; y += gridSize) {
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
        ctx.stroke();
    }

    // 4. Create an off-screen canvas for processing the image.
    const offscreenCanvas = document.createElement('canvas');
    offscreenCanvas.width = originalImg.width;
    offscreenCanvas.height = originalImg.height;
    // The 'willReadFrequently' hint can improve performance for getImageData.
    const offscreenCtx = offscreenCanvas.getContext('2d', { willReadFrequently: true });

    // Draw the original image to the off-screen canvas to get its pixel data.
    offscreenCtx.drawImage(originalImg, 0, 0);

    // Get the pixel data from the original image.
    const imageData = offscreenCtx.getImageData(0, 0, offscreenCanvas.width, offscreenCanvas.height);
    const data = imageData.data;

    // 5. Process the pixels to create the blueprint line effect.
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        const a = data[i + 3];

        // If the original pixel is fully transparent, leave it that way.
        if (a === 0) {
            continue;
        }

        // Convert the pixel color to grayscale using the luminosity method.
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Invert the grayscale value. Dark areas become bright, light areas become dark.
        const invertedGray = 255 - gray;

        // Set the output pixel color to white.
        data[i]     = lineColor.r;
        data[i + 1] = lineColor.g;
        data[i + 2] = lineColor.b;

        // Use the inverted brightness as the new alpha. This makes dark lines from the
        // original image appear as opaque white lines, and light backgrounds become
        // transparent, revealing the blue grid. We modulate by the original alpha
        // to preserve existing transparency.
        data[i + 3] = invertedGray * (a / 255);
    }

    // Puts the modified pixel data back onto the off-screen canvas.
    offscreenCtx.putImageData(imageData, 0, 0);

    // 6. Calculate dimensions to draw the processed image onto the main canvas,
    // preserving aspect ratio and fitting it within the standard size.
    const imgAspectRatio = originalImg.width / originalImg.height;
    let drawWidth = canvas.width;
    let drawHeight = drawWidth / imgAspectRatio;

    if (drawHeight > canvas.height) {
        drawHeight = canvas.height;
        drawWidth = drawHeight * imgAspectRatio;
    }

    // Center the image on the main canvas.
    const offsetX = (canvas.width - drawWidth) / 2;
    const offsetY = (canvas.height - drawHeight) / 2;

    // 7. Draw the processed, white-line image (from the offscreen canvas) onto the final canvas.
    ctx.drawImage(offscreenCanvas, offsetX, offsetY, drawWidth, drawHeight);

    // 8. Return the final canvas element.
    return canvas;
}