Canvas animation memory leak

by Adam Granger

HTML

<canvas width="200" height="200" id="canvas"></canvas>

CSS

#canvas {
    border: 1px solid red;
    width: 200px;
    height : 200px;
}

JavaScript

$(document).ready(function () {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext('2d');
    var clock = 0;

    var renderLoop = function () {
        context.fillStyle = '#CCC';
        context.strokeStyle = '#000';
        context.clearRect(0, 0, canvas.width, canvas.height);

        context.fillStyle = 'rgba(255, 0, 0, 0.5)';
        context.save();
        context.translate(canvas.width / 2, canvas.height / 2);

        var i = 0;
        for (i = 0; i < 10; i++) {
            context.save();
            context.rotate((clock + i * 10) / 180 * Math.PI);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(canvas.width / 2, -1);
            context.lineTo(canvas.width / 2, 1);
            context.lineTo(0, 0);

            context.closePath();
            context.fill();
            context.restore();
        }
        context.restore();

        clock++;
        window.requestAnimationFrame(renderLoop);
    };

    renderLoop();

});