Jquery 使用悬停画布交叉淡入背景图像

不支持跨浏览器进行背景图像转换，为了克服这一问题，我尝试在用户悬停在section元素上方/之外时使用canvas元素绘制图像。但它似乎不起作用。这些图像根本不会被替换

这就是我到目前为止所做的：

HTML

<section class="section2 animate-me" data-src="images/section2_img.png" data-src-hover="images/section2_img_hover.png">
    <canvas id="canvas2" class="background-canvas"></canvas>
        ...
        ...
        //removed for brevity
</section>

CSS

$(function () {
    $('.animate-me .animate-container').hover(function () {
            var section = $(this).parent().parent().parent().parent();                
            toggleCanvasImage(section.find('canvas').attr("id"), section.data("src"), section.data("src-hover"));
        }, function () {
            var section = $(this).parent().parent().parent().parent();
            toggleCanvasImage(section.find('canvas').attr("id"), section.data("src-hover"), section.data("src"));
        });
    });

    function toggleCanvasImage(canvasId, imageFrom, imageTo) {

        canvas = document.getElementById(canvasId);
        ctx = canvas.getContext("2d");

        var imageA = new Image();
        imageA.src = imageFrom;
        var imageB = new Image();
        imageB.src = imageTo;

        var i = 0.1; // global alpha      
        var runID;

        function fadeImage() {
            if (i > 1) {
                clearInterval(runID);
                return;
            }
            ctx.globalComposite = "lighter";
            ctx.globalAlpha = i;
            ctx.drawImage(imageA, 0, 0);
            ctx.globalAlpha = 1 - i;
            ctx.drawImage(imageB, 0, 0);
            i += 0.1;
            console.log("draw with alpha: " + i);
        }
        function run() {
            ctx.save();
            runID = setInterval(fadeImage, 100);
            ctx.restore();
        }

        run();
    }

.background-canvas {
   width: 1920px;
   height: auto;
   position: absolute;
}

代码似乎执行得很好。在mouseover上，我将mouseout事件传入2个图像URL，以实现平滑转换，然后执行run函数重新绘制图像

代码主要是从

有没有什么提示说明它为什么不工作，并针对相同的问题进行修复

UPATE 下面是简化版的代码。

---

检查此错误

未能在“CanvasRenderingContext2D”上执行“drawImage”：提供的HTMLImageElement处于“断开”状态。

我没有收到此错误。请您创建一个代码片段，请查看我用小提琴更新的问题。我试图找出问题所在。一件事是，画布位于文本上方，因此没有悬停。另一个原因是图像加载需要时间。你可以在这里找到我的预览