canvas animation

by jpeter06

HTML

<span>CANVAS ANIMATION &nbsp;&nbsp;&nbsp;&nbsp;</span>
<div id="fps">0</div>&nbsp;fps<br>
<canvas id="cv" width="200" height="300"></canvas>

CSS

body {background:#fe6;}
span { color:blue;  font-family:Arial;float:left;}
div {float:left;}
canvas { border: 1px solid black; }

JavaScript

//Canvas dimensions.
var dimX=200;
var dimY=300;
var pos=null;
var fullCircle=2*Math.PI;

//Body dimensions
var bodyColor="#000088";
var totalSize=200;
var relBodyHead=0.7;
var relTailTotal=0.5;

var longBody=totalSize*(1-relTailTotal)*relBodyHead;
var longBody2=longBody*0.5;
var widthBody=longBody*0.4;
var widthBody2=widthBody*0.5;
var widthBody4=widthBody*0.25;

var longHead=totalSize*(1-relTailTotal)*(1-relBodyHead);
var longHead2=longHead*0.5;
var widthHead=longHead*0.65;
var longTail=totalSize*relTailTotal;
var longTail2=longTail*0.5;
var longTail4=longTail*0.25;

//Frames per second
var fps = 0, now, lastUpdate = (new Date)*1 - 1;
var fpsFilter = 50;
var fpsOut = document.getElementById('fps');
setInterval(function(){
  fpsOut.innerHTML = fps.toFixed(1);}, 1000);


// requestAnim shim layer by Paul Irish
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback, element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();



//main context.
var ctx=document.getElementById("cv").getContext('2d');

//init render;
render();

//our render function
function render() {
    requestAnimFrame(render);
    animCanvas();
    var thisFrameFPS = 1000 / ((now=new Date) - lastUpdate);
    fps += (thisFrameFPS - fps) / fpsFilter;
    lastUpdate = now * 1 - 1;
}

//anim canvas
function animCanvas(){
    var inc=getInc();
    ctx.clearRect(0,0,dimX,dimY);
    ctx.save();
     //move to the center
     ctx.translate(dimX*0.5,dimY*0.5);
     ctx.rotate(12*Math.PI/180);
     ctx.fillStyle = bodyColor;
     drawBody(ctx,inc);
     drawTail(ctx,inc);
     drawHead(ctx,inc);
     ctx.fill(); 
     // Feet
     drawFeet(inc);
    ctx.restore();
}

function drawFeet(inc){
 ...