Photo To Musical Scale Notes Maker

function processImage(originalImg, fontSize = 10, bgColor = "#000000", lineHeight = 1.0, charSpacing = 0.2) {
    // Ensure numeric parameters are parsed correctly
    const fSize = Number(fontSize) || 10;
    const lHeight = Number(lineHeight) || 1.0;
    const cSpacing = isNaN(Number(charSpacing)) ? 0.2 : Number(charSpacing);

    const width = originalImg.width;
    const height = originalImg.height;

    // Create an off-screen canvas to extract pixel data from the original image
    const offCanvas = document.createElement("canvas");
    offCanvas.width = width;
    offCanvas.height = height;
    const ctx = offCanvas.getContext("2d");
    ctx.drawImage(originalImg, 0, 0, width, height);

    let imgData;
    try {
        imgData = ctx.getImageData(0, 0, width, height);
    } catch (e) {
        console.error("Failed to read image data (CORS issue). Returning drawn image directly.");
        return offCanvas;
    }
    const data = imgData.data;

    // Create the output canvas
    const outCanvas = document.createElement("canvas");
    outCanvas.width = width;
    outCanvas.height = height;
    const outCtx = outCanvas.getContext("2d");

    // Fill the background
    outCtx.fillStyle = bgColor;
    outCtx.fillRect(0, 0, width, height);

    // Set styling for the musical scale notes text
    outCtx.font = `bold ${fSize}px "Arial", sans-serif`;
    outCtx.textBaseline = "middle";
    outCtx.textAlign = "center";

    // "Do Re Mi Fa Sol La Ti Do" as requested in the title
    const syllables = ["Do", "Re", "Mi", "Fa", "Sol", "La", "Ti", "Do"];
    let syllableIdx = 0;

    let x = 0;
    let y = fSize / 2; // Start rendering at half the font size so tops are not cut off

    while (y < height) {
        const text = syllables[syllableIdx % syllables.length];
        
        // Measure text width dynamically to pack it beautifully according to characters
        const textWidth = outCtx.measureText(text).width;
        const stepX = textWidth + fSize * cSpacing;

        // Wrap to the next line if the current text block exceeds the image boundary
        if (x + stepX > width && x > 0) {
            x = 0;
            y += fSize * lHeight;
            continue; // Re-evaluate line with the same syllable
        }

        // Calculate the center coordinates for the current word
        const cx = Math.floor(x + stepX / 2);
        const cy = Math.floor(y);
        
        // Find the safely bound index inside the pixel data array
        const px = Math.min(Math.max(cx, 0), width - 1);
        const py = Math.min(Math.max(cy, 0), height - 1);
        const i = (py * width + px) * 4;

        if (i >= 0 && i < data.length) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];
            const a = data[i + 3] / 255;

            if (a > 0) {
                // Color the syllable with the exact sampled color from the original photo
                outCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
                outCtx.fillText(text, cx, cy);
            }
        }

        // Proceed to next syllabus and shift the X position forward
        syllableIdx++;
        x += stepX;
    }

    return outCanvas;
}