Game loop template with play/pause fading

<canvas width="800" height="600" id="cvs" onclick="playPause()"></canvas>
<script>

var Template = {};
var requestAnimationFrame =
window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame;

var cancelAnimationFrame =
window.cancelAnimationFrame||
window.webkitCancelRequestAnimationFrame||
window.webkitCancelAnimationFrame||
window.mozCancelRequestAnimationFrame||
window.mozCancelAnimationFrame||
window.oCancelRequestAnimationFrame||
window.oCancelAnimationFrame||
window.msCancelRequestAnimationFrame||
window.msCancelAnimationFrame;

Template.newTime = Date.now();
Template.time = 0;
Template.animation = function()
{
 if(!Template.stopped)
 {
  Template.oldTime = Template.newTime;
  if(!Template.paused)
  {
   Template.calculate();
  }
  Template.draw();
  Template.newTime = Date.now();
  Template.time=Template.newTime-Template.oldTime;
  Template.animationFrame = requestAnimationFrame(Template.animation);
 }
}
Template.start = function(d,c)
{
 Template.draw = d;
 Template.calculate = c;
 Template.paused = false;
 Template.animationFrame = requestAnimationFrame(Template.animation);
}
Template.stop = function()
{
 cancelAnimationFrame(Template.animationFrame);
}


function Transition(start,end,period,loops,func)
{
 this.start = start;
 this.end = end;
 this.period = period;
 if(!func)this.func = function(a){return a;};
 else this.func = func;
 this.pos = 0;
 this.reversed;
 this.loop = loops;
 this.res = 0;
 this.calc = function(timeScale)
{
  if(timeScale==null)timeScale=1;
  if(this.reversed) this.pos -= Template.time/this.period*timeScale;
  else this.pos += Template.time/this.period*timeScale;
  //
  if(this.loop==0)
  {
   this.pos = (this.pos+1)%1;
  }
  else
  {
   this.pos = Math.min(this.loop,Math.max(this.pos,0));
  }
  this.res = this.func(this.pos)*(end-start)+start;
}
 this.get = function()
 {
 return this.res;
 }
 this.reverse = function()
 {
  this.reversed = !this.reversed;
 }
}

var G,person,fade;
function init()
{
 fade = new Transition(1,0,500,1);
 G = cvs.getContext("2d");
 person = {
  x:cvs.width/2,
  y:cvs.height/2,
  h:1,
  w:0,
  transitions:
  {
   stand:new Transition(-20,20,500,0,function(d)
    {
     return Math.sin(d*2*Math.PI)*0.5+0.5;//Math.pow(d*4-2,2)/4;
    }),
   walk:new Transition(-20,20,500,0,function(d)
    {
     return Math.cos(d*2*Math.PI)*0.5+0.5;//Math.abs(d-0.5);
    })
  },
  draw:function(G)
  {
   G.moveTo(this.x,this.y);
   G.lineTo(this.x+this.w,this.y+this.h);
  }
 };
 Template.start(draw,calc);
}
function draw()
{
 fade.calc();
 person.transitions.walk.calc(1-fade.get());
 person.transitions.stand.calc(1-fade.get());
 person.w=person.transitions.walk.get();
 person.h=person.transitions.stand.get();
 G.fillStyle = "rgba(128,128,128,"+fade.get()/2+")";
 G.clearRect(0,0,cvs.width,cvs.height);
 G.strokeStyle = "RGB(255,0,0)";
 G.beginPath();
 person.draw(G);
 G.stroke();
 G.fillRect(0,0,cvs.width,cvs.height);
 G.strokeStyle = "rgba(0,255,0,"+fade.get()+")";
 G.strokeText("PAUSED",cvs.width/2,cvs.height/2);

}
function calc()
{
}
function playPause()
{
 Template.paused = !Template.paused;
 if(!Template.paused)
 {
  person.transitions.walk.reverse();
  person.transitions.stand.reverse();
 }
 fade.reversed = Template.paused;
}
init();
</script>