canvas looping

by gamealchemist

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);

animateManaging();

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");

  var moveSpeed = 2;
  var viewWidth = 386;
  var viewHeight = 380;
  var animInterval = 20;

  // 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');

  // 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() {

    // 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 other and
      // That isn't quite what we want.


      // Adds one to the interval count
      i++;

      // Tells canvas we...