DrawImage在Firefox中无法正常执行（适用于IE和Chrome）

Question

我正在开发一种动画启动页面，其中一个对象从小开始并且splats进入屏幕。效果在chrome和Internet Explorer中按预期工作，但我似乎在让代码在firefox中执行时遇到问题。我相信它会停止在执行ctx.drawImage（）函数的行上工作，因为页面上根本没有任何动画。

这是我正在使用的代码（对不起，它有点乱）：

$(document).ready(function() {  
    $('.content').hide();       
    var ctx = document.getElementById('canvas').getContext('2d');

    window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    var myBool = false;
    var count = 15;
    var win = new Image();
    var splash;
    splash = new Image();
    splash.onload = function () {
        ctx.drawImage(win, 0, 0);
    }
    splash.src = "../../../../../Media/splash.png";

    animate();

    function animate() {
        if (count >= 1) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();
            ctx.drawImage(win, 0, 0);
            ctx.globalCompositeOperation = 'destination-over';
            ctx.drawImage(splash, 0, 0, splash.width, splash.height, 0, 0, splash.width / count, splash.height / count);
            ctx.restore();
        }

        requestAnimFrame(function () {
            if (count < 1)
            {
                finishIt(); 
            }
            else
            {
                count--;
                animate();
            }
        });         
    }

    function finishIt()
    {
        ctx.drawImage(splash, 0, 0, splash.width, splash.height, 0, 0, splash.width + 300, splash.height);
        ctx.drawImage(splash, 0, 0, splash.width, splash.height, 0, 0, splash.width + 300, splash.height);
        myBool = false;
        $('.content').fadeIn(1000); 
    }
 });

再一次，任何帮助将不胜感激。感谢。