canvas looping

HTML

<div class="pull-right outsideWrapper">
                <div class="insideWrapper">
                <img src="http://s33.postimg.org/praff3huj/managing_machine.png"  class="coveredImage">
                <canvas class="coveringCanvas" id="cvs3" width="380" height="386">
                    <img src="http://s33.postimg.org/rkdc3f317/managing_static.png" class="img-responsive pull-right">
                </canvas>
                </div>
            </div>

CSS

/* animations */

.outsideWrapper {
    width:380px;
    height:386px;
}
.insideWrapper {
    width:100%;
    height:100%;
    position:relative;
}
.coveredImage {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
.coveringCanvas {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}

JavaScript

setInterval(animateManaging,6000);

function animateManaging() {
    // Grabs the canvas element we made above
    var ca1=document.getElementById("cvs3");

    // Defines the 2d thing, standard for making a canvas
    var c1=ca1.getContext("2d");

    // Creates an image variable to hold and preload our image (can't do animations on an image unless its fully loaded)
    var img1 = document.createElement('IMG');

    // Loads image link into the img element we created above
    img1.src = "http://s33.postimg.org/3pk551xcv/managing_values.png";

    // Creates the first save event, this gives us a base to clear our clipping / mask to since you can't just delete elements.
    c1.save();

    // Our function for when the image loads
    img1.onload = function () {
        // clear off the canvas


        // First call to our canvas drawing function, the thing that is going to do all the work for us.
            drawc1r(0);

        // The function that is doing all the heavy lifting. The reason we are doing a function is because
        // to make an animation we have to draw the circle (or element) frame by frame, to do this manually would be to time
        // intensive so we are just going to create a loop to do it. 'i' stands for the radius of our border
        // so over time our radius is going to get bigger and bigger.
        function drawc1r(i) {
            // Creates a save state. Imagine a save state like an array, when you clear one it pops last element in the array off the stack
            // When you save, it creates an element at the top of the stack. So if we cleared without making new ones, we would end up with nothing on our stage.

            c1.save();

            // This clears everything off the stage, I do this because our image has transparency, and restore() (the thing that pops one off the stack)
            // Doesn't clear off images, and so if we stick an image on the stage over and over, the transparency will stack on top of each...