HTML5 Animation problems with Chrome

Question

I'm trying to make some kind of lightning radar with HTML 5. Problem is that the code works perfectly with Firefox but with Chrome only one of the animations works. I didn't even try with IE...

I checked the code with Chrome's console and console.log() function and everything was fine. All values was OK and all for loops work, but still no drawing. There was also no errors neither on Firefox's or Chrome's console.

Can you help me on this?

I wrote comments next to those three functions so it's easier to find out what I'm talking about:

function newLightningAnim() {
    var radius = 200;
    var time = (new Date()).getTime() - lightningStart;
    var newRadius = radius - time / 7;
    var time2 = (new Date()).getTime() - selectionStart;
    var mouseRadius = time2 / 5;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if(lightningImg.src){ctx.drawImage(lightningImg, 0, 0, canvas.width, canvas.height);}

    if(lightnings.length > 0) { // Works only with Firefox
        for(i = 0; i < lightnings.length; i++){
            ctx.beginPath();
            for(u = 0; u < lightnings[i].length; u++){
                if(newRadius > 0 && lightnings[i].length > 0){
                    var x = canvas.width / img.width * lightnings[i][u]['X'];
                    var y = canvas.height / img.height * lightnings[i][u]['Y'];
                    ctx.moveTo(x+newRadius,y);
                    ctx.arc(x, y, newRadius, 0, 2 * Math.PI, true);
                }
            }
            ctx.closePath();
            ctx.strokeStyle = "rgb(" + colorArr[i] + ")";
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.fillStyle = "rgba(" + colorArr[i] + ", 0.2)";
            ctx.fill();
        }
    }

    if(selectionRadius){ // Works with Chrome and Firefox
        if(mouseRadius > canvas.width / 100 * selectionRadius / 2) { mouseRadius = canvas.width / 100 * selectionRadius / 2; }

        ctx.beginPath();

        ctx.moveTo(selectionX,selectionY);
        ctx.lineTo(selectionX-4,selectionY);
        ctx.moveTo(selectionX,selectionY);
        ctx.lineTo(selectionX,selectionY-4);
        ctx.moveTo(selectionX,selectionY);
        ctx.lineTo(selectionX+4,selectionY);
        ctx.moveTo(selectionX,selectionY);
        ctx.lineTo(selectionX,selectionY+4);

        ctx.moveTo((selectionX+mouseRadius),selectionY);
        ctx.arc(selectionX, selectionY, mouseRadius, 0, 2 * Math.PI, true);
        ctx.closePath();

        ctx.strokeStyle = 'lightgreen';
        ctx.lineWidth = 1;
        ctx.stroke();
    }

    if(alert.length > 0) { // Works only with Firefox
        ctx.beginPath();
        for(i = 0; i < alert.length; i++){

            ctx.moveTo(alert[i][0],alert[i][1]);
            ctx.lineTo(alert[i][0]-5,alert[i][1]);
            ctx.moveTo(alert[i][0],alert[i][1]);
            ctx.lineTo(alert[i][0],alert[i][1]-5);
            ctx.moveTo(alert[i][0],alert[i][1]);
            ctx.lineTo(alert[i][0]+5,alert[i][1]);
            ctx.moveTo(alert[i][0],alert[i][1]);
            ctx.lineTo(alert[i][0],alert[i][1]+5);

            ctx.drawImage(alertImg, alert[i][0] - 12, alert[i][1]-24, 24, 24);
        }
        //ctx.lineWidth = 1;
        //ctx.stroke();
    }

    requestAnimFrame(function() {
        newLightningAnim();
    });
}

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

I noticed that the only animation that is working doesn't contain any loops if that helps. I just simply have lack of skills with this...