Image Veil Wrap And Short Styling Tool

/**
 * Applies a "veil" effect to an image, overlaying it with a translucent pattern.
 * The effect can be a cross-hatch "wrap" or a dotted "short" style.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} style The style of the veil. Can be 'wrap' for a cross-hatch pattern or 'short' for a dotted pattern. Defaults to 'wrap'.
 * @param {string} color The color of the veil pattern in a CSS format (e.g., 'white', '#FFF', 'rgba(255, 255, 255, 0.4)'). Defaults to 'rgba(255, 255, 255, 0.4)'.
 * @param {number} patternDensity Controls the density of the pattern. Higher numbers result in a tighter pattern. Defaults to 30.
 * @param {number} patternThickness The thickness of the lines or dots in the pattern, in pixels. Defaults to 1.
 * @returns {HTMLCanvasElement} A new canvas element with the veil effect applied.
 */
function processImage(originalImg, style = 'wrap', color = 'rgba(255, 255, 255, 0.4)', patternDensity = 30, patternThickness = 1) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get image dimensions
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set canvas dimensions
    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Prepare to draw the veil pattern
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
    ctx.lineWidth = Math.max(1, patternThickness); // Ensure thickness is at least 1

    // Determine the step size for the pattern based on density
    const step = Math.max(width, height) / Math.max(1, patternDensity);

    if (style === 'wrap') {
        // --- Cross-hatch pattern ("Veil Wrap") ---
        ctx.beginPath();

        // Draw diagonal lines from top-left to bottom-right
        for (let i = -height; i < width; i += step) {
            ctx.moveTo(i, 0);
            ctx.lineTo(i + height, height);
        }

        // Draw diagonal lines from top-right to bottom-left
        for (let i = 0; i < width + height; i += step) {
            ctx.moveTo(i, 0);
            ctx.lineTo(i - height, height);
        }
        ctx.stroke();

    } else if (style === 'short') {
        // --- Dotted pattern ("Veil Short" - like a birdcage veil) ---
        const dotRadius = Math.max(0.5, patternThickness / 2);

        for (let y = step / 2; y < height; y += step) {
            for (let x = step / 2; x < width; x += step) {
                ctx.beginPath();
                ctx.arc(x, y, dotRadius, 0, 2 * Math.PI, false);
                ctx.fill();
            }
        }
    }

    // Return the final canvas
    return canvas;
}