Game loop template with piston

<!DOCTYPE html>
<html>
<head>
<style>

</style>
<script>

</script>
</head>
<body>
<canvas width="800" height="600" id="cvs" onclick="playPause()" onmousemove="mouseMove(event)"></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()
 {
  if(this.reversed) this.pos -= Template.time/this.period;
  else this.pos += Template.time/this.period;
  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,mouse,piston;
function init()
{
 G = cvs.getContext("2d");
 piston = [
 new Transition(-50,50,3000,0,function(d){return Math.sin(d*2*Math.PI)*0.5+0.5;}),
 new Transition(-50,50,3000,0,function(d){return Math.cos(d*2*Math.PI)*0.5+0.5;}),
 new Transition(Math.PI,-Math.PI,3000,0)
 ];
 person = {
  x:0,
  y:0,
  w:0,
  h:0
 };
 mouse = {
  x:cvs.width/2,y:cvs.width/2
 };
 Template.start(draw,calc);
}

function draw()
{
 person.x = mouse.x;
 person.y = mouse.y;
 person.w = piston[0].get();
 person.h =  piston[1].get();
 G.clearRect(0,0,cvs.width,cvs.height);
 G.beginPath();
 G.moveTo(person.x+person.w,person.y+person.h);
 G.arc(person.x,person.y,50,piston[2].get(),piston[2].get()-Math.PI);
 G.lineTo(person.x+person.w,person.y+person.h);
 G.lineTo(person.x+person.w,person.y-150+person.h);
 G.lineTo(person.x+person.w+0,person.y-100);
 G.lineTo(person.x-100+person.w,person.y-100);
 G.stroke();
}
function calc()
{
 var dx = Math.sqrt(Math.pow(mouse.x,2)+Math.pow(mouse.y,2));
 piston[0].calc();
 piston[1].calc();
 piston[2].calc();
 piston[0].period = dx;
 piston[1].period = dx;
 piston[2].period = dx;
}

function playPause()
{
 //Click to pause and reverse
 Template.paused = !Template.paused;
 if(!Template.paused)
 {
 piston[0].reverse();
 piston[1].reverse();
 piston[2].reverse();
 }
}

function mouseMove(e)
{
 mouse.x = e.offsetX;
 mouse.y = e.offsetY;
}

init();
</script>

</body>
</html>