Window and Leveling doesn’t update to image displayed in Javascript

I have these html file that I is a simple window to load an image and to use two sliders to adjust the window and leveling of the loaded image. The image loads and the sliders adjust but the image doesn’t update as the sliders move.

I am very new to js and html so it’s probably something obvious

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Window and Level Adjustment</title>
    <style>
        #imageCanvas {
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

    <canvas id="imageCanvas" width="512" height="512"></canvas>
    <br>
    <label for="window">Window: </label>
    <input type="range" id="window" min="0" max="1000" value="500">
    <br>
    <label for="level">Level: </label>
    <input type="range" id="level" min="0" max="1000" value="500">

    <script>
        const canvas = document.getElementById('imageCanvas');
        const ctx = canvas.getContext('2d');

        const windowSlider = document.getElementById('window');
        const levelSlider = document.getElementById('level');

        let originalImageData;
        let imageData;

        // Load the image
        function loadImage() {
            const img = new Image();
            img.src = 'output_image.png';  // Load the uploaded image
            img.onload = function () {
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                originalImageData = new Uint8ClampedArray(imageData.data);

                // Calculate min and max intensity for dynamic slider range
                let minIntensity = 255, maxIntensity = 0;
                for (let i = 0; i < originalImageData.length; i += 4) {
                    let intensity = originalImageData[i];
                    if (intensity < minIntensity) minIntensity = intensity;
                    if (intensity > maxIntensity) maxIntensity = intensity;
                }

                console.log("Min intensity:", minIntensity);
                console.log("Max intensity:", maxIntensity);

                windowSlider.min = 0;
                windowSlider.max = maxIntensity - minIntensity;
                windowSlider.value = (windowSlider.max - windowSlider.min) / 2;

                levelSlider.min = minIntensity;
                levelSlider.max = maxIntensity;
                levelSlider.value = (levelSlider.max - levelSlider.min) / 2;

                applyWindowLevel();
            };
        }

        function applyWindowLevel() {
            const window = parseInt(windowSlider.value);
            const level = parseInt(levelSlider.value);
            const minVal = level - (window / 2);
            const maxVal = level + (window / 2);

            // Create a copy of the original image data to work on
            imageData.data.set(originalImageData);

            for (let i = 0; i < originalImageData.length; i += 4) {
                let intensity = originalImageData[i];
                let adjusted = (intensity - minVal) * (255 / (maxVal - minVal));
                adjusted = Math.min(Math.max(adjusted, 0), 255);

                imageData.data[i] = imageData.data[i + 1] = imageData.data[i + 2] = adjusted;
            }

            ctx.putImageData(imageData, 0, 0);
        }

        windowSlider.addEventListener('input', applyWindowLevel);
        levelSlider.addEventListener('input', applyWindowLevel);

        loadImage();

    </script>

</body>
</html>

This is output Displayed Image