DVD Player Video TV Search Word Finder Tool

function processImage(originalImg, width = 800, height = 600, speed = 3, overlayText = "SEARCH WORD", bgColor = "#000000") {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Scale the image down so it looks like a floating logo (25% of the canvas)
    const scale = Math.min(width / originalImg.width, height / originalImg.height) * 0.25;
    const imgW = originalImg.width * scale;
    const imgH = originalImg.height * scale;

    // Start at a random position within the canvas boundaries
    let x = Math.random() * (width - imgW);
    let y = Math.random() * (height - imgH);
    
    // Setup bouncing speeds
    let dx = speed;
    let dy = speed;
    if (Math.random() > 0.5) dx = -dx;
    if (Math.random() > 0.5) dy = -dy;

    // Standard list of bright "DVD screen saver" classic colors
    const colors = [
        '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#00ffff', '#ff00ff', '#ffffff', '#ff8800'
    ];
    let colorIndex = Math.floor(Math.random() * colors.length);

    // Creates an off-screen canvas version of the image with a color tint applied
    function createTintedImage(color) {
        const offCanvas = document.createElement('canvas');
        offCanvas.width = imgW;
        offCanvas.height = imgH;
        const offCtx = offCanvas.getContext('2d');
        
        offCtx.drawImage(originalImg, 0, 0, imgW, imgH);
        
        // Apply tint via blending
        offCtx.fillStyle = color;
        offCtx.globalCompositeOperation = 'multiply';
        offCtx.fillRect(0, 0, imgW, imgH);
        
        // Preserve original alpha transparency shape
        offCtx.globalCompositeOperation = 'destination-in';
        offCtx.drawImage(originalImg, 0, 0, imgW, imgH);

        // Render floating overlay text
        if (overlayText && overlayText.trim().length > 0) {
            offCtx.globalCompositeOperation = 'source-over';
            offCtx.fillStyle = '#ffffff';
            offCtx.strokeStyle = '#000000';
            offCtx.lineWidth = 3;
            // Scale font size according to image dimensions
            const fontSize = Math.max(12, Math.floor(imgW * 0.15));
            offCtx.font = `bold ${fontSize}px sans-serif`;
            offCtx.textAlign = 'center';
            offCtx.textBaseline = 'middle';
            offCtx.strokeText(overlayText.trim(), imgW / 2, imgH / 2);
            offCtx.fillText(overlayText.trim(), imgW / 2, imgH / 2);
        }

        return offCanvas;
    }

    let currentImg = createTintedImage(colors[colorIndex]);
    let framesUnconnected = 0;

    function animate() {
        // Automatically garbage-collect the animation loop if canvas is removed from DOM
        // Check allows a 5-second grace period (~300 frames) in case of asynchronous DOM insertion
        if (!canvas.isConnected) {
            framesUnconnected++;
        } else {
            framesUnconnected = 0;
        }

        if (framesUnconnected > 300) {
            return;
        }

        // Draw background
        ctx.fillStyle = bgColor;
        ctx.fillRect(0, 0, width, height);

        // Draw bouncing image
        ctx.drawImage(currentImg, x, y);

        x += dx;
        y += dy;

        let hitEdge = false;
        
        // Check horizontal bounds
        if (x + imgW >= width) {
            dx = -Math.abs(dx);
            hitEdge = true;
            x = width - imgW;
        } else if (x <= 0) {
            dx = Math.abs(dx);
            hitEdge = true;
            x = 0;
        }

        // Check vertical bounds
        if (y + imgH >= height) {
            dy = -Math.abs(dy);
            hitEdge = true;
            y = height - imgH;
        } else if (y <= 0) {
            dy = Math.abs(dy);
            hitEdge = true;
            y = 0;
        }

        // Change visual properties on bounce
        if (hitEdge) {
            let nextColorIndex = (colorIndex + Math.floor(Math.random() * (colors.length - 1)) + 1) % colors.length;
            colorIndex = nextColorIndex;
            currentImg = createTintedImage(colors[colorIndex]);
        }

        requestAnimationFrame(animate);
    }

    // Initiate animation iteration
    animate();

    return canvas;
}