title: Circular Path Animation not working with Pulsating Movement
body: <p>I'm trying to achieve a kind of pulsating moon effect with canvas in HTML5. I have the pulsating effect, but my requestAnimation function does not seem to be updating the frame along the circular path that I have defined. Here's the javascript. </p>
  
  <pre><code>window.requestAnimFrame = function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame 
  ||
  window.mozRequestAnimationFrame || window.oRequestAnimationFrame
  || window.msRequestAnimationFrame ||
    function(a) {
     window.setTimeout(a, 1E3 / 60)
    }
  }();
  
  
  var canvas = document.getElementById('canvas');       
  var context = canvas.getContext('2d');
  
   function Ball(radius, color) {
    if (radius === undefined) {
     radius = 40;
     }
    if (color === undefined) {
    color = "#ff0000";
     }
  
    this.x = 0;
    this.y = 0;
    this.radius = radius;
    this.rotation = 0;
    this.scaleX = 1;
    this.scaleY = 1;
    this.lineWidth = 1;
    }
  
    Ball.prototype.draw = function(context) {
    context.save();
    context.translate(this.x, this.y);
    context.rotate(this.rotation);
    context.scale(this.scaleX, this.scaleY);
    context.lineWidth = this.lineWidth;
    context.fillStyle = "#e50000";
    context.beginPath();
    //x, y, radius, start_angle, end_angle, anti-clockwise
    context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
    context.closePath();
    context.fill();
   if (this.lineWidth &gt; 0) {
    context.stroke();
    }
    context.restore();
    };
  
    window.onload = function() {    
    var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          ball = new Ball(),
          angle = 0,
          centerScale = 1,
          range = 0.5,
          speed = 0.02,
   
  pathX = canvas.width / 2,
  pathY = canvas.height / 2,
  pathRadius = 150,
  pathAngle = 0;
  ball.x = Math.cos(pathAngle) * pathRadius + pathX;
  ball.y = Math.sin(pathAngle) * pathRadius + pathY;  
  
     (function drawFrame() {      
     window.requestAnimationFrame(drawFrame, canvas);      
     context.clearRect(0, 0, canvas.width, canvas.height);      
    ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;  
    angle += speed;    
    pathAngle += speed;
    ball.draw(context);    
    }());  
  };
  </code></pre>