带有.png图像的滚动序列很奇怪

问：

所以我正在做我的项目，我想做一些类似 Apple Scroll Sequence 的部分。

但是当我将图像序列转换为.PNG时，这很糟糕:(

所以，这是我滚动该部分时的图像。就像影子/emm我不知道是什么哈哈。

这是我的代码：

 <div class="intermezo-sequence">
                <div class="sticky-element">
                    <div class="sequence-element">
                        <canvas id="intermezo_canvas"></canvas>
                    </div>
                </div>
            </div>          

const canvas = document.querySelector('#hero_canvas')
const ctx = canvas.getContext('2d')
const heroSequence = document.querySelector('.hero-sequence')
const images = []

var sequence1 = <?= json_encode($sequence1) ?>;
sequence1.sort();
const frameCount = sequence1.length; // biar dinamis total nya
const prepareImages = () => {
    for (var i = 0; i < frameCount; i++) {
        // console.log(sequence1[i]);
        const image = new Image()
        // image.src = `./assets/images/studycase/sequence/${i}.jpg`
        canvas.width = 1928;
        canvas.height = 1000;
        image.src = sequence1[i];
        images.push(image)
        if (i === 0) {
            images[i].onload = () => drawImage1(0)
        }
    }
}

const drawImage1 = frameIndex => {
    ctx.drawImage(images[frameIndex], 0, 0)
}

prepareImages()

const heroSection = document.getElementById("heroSection");
window.addEventListener('scroll', () => {
    const scrollTop = document.documentElement.scrollTop - heroSection.offsetTop
    const maxScrollTop = heroSequence.scrollHeight - window.innerHeight
    const scrollFraction = scrollTop / maxScrollTop
    const frameIndex = Math.max(0, Math.min(frameCount - 1, Math.ceil(scrollFraction * frameCount)))

    images[frameIndex].onload = () => drawImage1(frameIndex)
    requestAnimationFrame(() => drawImage1(frameIndex))
})

我应该在逻辑中添加什么吗？谢谢！