I am creating Canvas (I am new to this Canvas) object cylinder this is working fine Chrome & Firefox but when i open the same file in ie9.

I am getting error as 'requestAnimationFrame' is undefined

When i google the error it says requestAniationFrame won't work on ie9.

Can any body help me with this do we have any alternate way to solve this.

and here is my code

var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        var degreeAngle = 0;
        requestAnimationFrame(animate);

        function drawRotatedCylinder(x, y, w, h, degreeAngle) {
            context.save();
            context.translate(x + w / 10, y + h / 10);
            context.rotate(degreeAngle * Math.PI / 180);
            drawCylinder(-w / 10, -h / 10, w, h);
            context.restore();
        }   
function animate() {
        //requestAnimationFrame(animate);
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawRotatedCylinder(100, 100, 180, 180, degreeAngle++);
}

Kindly help me for the above solution

Thanks Regards Maha

I am creating Canvas (I am new to this Canvas) object cylinder this is working fine Chrome & Firefox but when i open the same file in ie9.

I am getting error as 'requestAnimationFrame' is undefined

When i google the error it says requestAniationFrame won't work on ie9.

Can any body help me with this do we have any alternate way to solve this.

and here is my code

var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        var degreeAngle = 0;
        requestAnimationFrame(animate);

        function drawRotatedCylinder(x, y, w, h, degreeAngle) {
            context.save();
            context.translate(x + w / 10, y + h / 10);
            context.rotate(degreeAngle * Math.PI / 180);
            drawCylinder(-w / 10, -h / 10, w, h);
            context.restore();
        }   
function animate() {
        //requestAnimationFrame(animate);
        context.clearRect(0, 0, canvas.width, canvas.height);
        drawRotatedCylinder(100, 100, 180, 180, degreeAngle++);
}

Kindly help me for the above solution

Thanks Regards Maha

• javascript
• jquery
• canvas
• html5-canvas
• internet-explorer-9

• 1 gist.github.com/paulirish/1579671 – adeneo Commented Jul 10, 2014 at 12:43
• You didn't really search for it, did you?! – A. Wolff Commented Jul 10, 2014 at 12:44
• hi @A.Wolff i really searched it but i was not able to find the solution – user3820621 Commented Jul 10, 2014 at 12:46
• @user3820621 So then, i apologize, see here for better explaination: paulirish.com/2011/requestanimationframe-for-smart-animating – A. Wolff Commented Jul 10, 2014 at 12:46

1 Answer 1

Erik Möller developed a robust polyfill that Paul Irish now hosts in his blog post about requestAnimationFrame. If you use this code, you can use requestAnimationFrame in pretty much any browser transparently:

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());