title: how to use request animation frame in a code which follows the following pattern?
body: <p>I have been around this problem for days now.I have written my code in constructor pattern for the first time.I want to extend the height of 10 bezier lines in transition.I have tried kineticjs(i failed),tried Setinterval(creates jerk in animation).So I finally resorted to requestAnimationFrame.But because of this constructor pattern,I am totally confused where to include it and what changes are to be made.</p>
  
  <p>This is what I have done so far---<a href="http://jsfiddle.net/jayeshjain24/UmSss/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>So basically I will be extending my endY and cpY1 and cpy2 in transition.Onmouseover of canvas the height of all bezier lines must increase in transition giving it an animation like feel.</p>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>//for entire code please have a look at the fiddle.this is just 10% of my code
  //for simplification purpose,you can use 3 instances instead of 9!!!
      (function() {
          hair = function() {
              return this;
          };
  
  
      hair.prototype={
  
       draw_hair:function(a,b,c,d,e,f,g,h){
  
              var sx  =136+a;//start position of curve.used in moveTo(sx,sy)
              var sy  =235+b;
              var cp1x=136+c;//control point 1
              var cp1y=222+d;
              var cp2x=136+e;//control point 2
              var cp2y=222+f;
              var endx=136+g;//end points
              var endy=210+h;
  
           var canvas = document.getElementById('myCanvas');
           var context = canvas.getContext('2d');
           context.strokeStyle="grey";
           context.lineWidth="8";
           context.beginPath();
           context.moveTo(sx,sy);
           context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,endx,endy);
           context.lineCap = 'round';
           context.stroke();
      }
  };
  })();
  </code></pre>