title: Fill color with animation
body: <p>Fill color canvas dynamic with animation. I have created canvas cylinder and it was filling the color. I need animation when I fill the color dynamically Example (slowly filling it).</p>
  
  <p>I have did search in google and I got the result as put animate :fadein / ease in the animation function.</p>
  
  <p>But nothing working for me </p>
  
  <pre><code>var perc = 0;
  $(document).ready(function () {
      $("#my_input").focusout(function (event) {
           if ($("#my_input").val().indexOf("%") != -1) {
  
              if ($.isNumeric($("#my_input").val().replace('%', ''))) {
  
                  // Allow only backspace and delete
                  if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37) {
                      //$("#myCanvas").animate({ opacity: 0.25 });
                  } else {
                      // Ensure that it is a number and stop the keypress
                      if (event.keyCode &lt; 48 || event.keyCode &gt; 57) {
                          event.preventDefault();
                      }
                  }
                  perc = parseInt($("#my_input").val().replace('%', '')) / 100;
                  draw();
              }
          } else {
              alert('Value in %');
          }
      });
  });
  
  function draw() {
      maxWidth = 180;
      maxHeight = 140;
      context.clearRect(0, 0, canvas.width, canvas.height);
      var x = 190;
      var y = 260;
  
      context.fillStyle = '#f2f2f2';
      context.beginPath();
      context.rect(x - maxWidth / 2, y - maxHeight, maxWidth, maxHeight);
      context.fill();
  
      var per = perc;
      if (per &gt; 1) perc = 1;
      // fill
  
      context.fillStyle = 'yellow';
  
      context.beginPath();
      context.rect(x - maxWidth / 2, y - maxHeight * perc, maxWidth, maxHeight * perc);
  
      context.fill();
  
      drawCylinder(100, 100, 180, 180);
      context.beginPath();
  
  }(function () {
      var lastTime = 0;
      var vendors = ['webkit', 'moz'];
      for (var x = 0; x &lt; vendors.length &amp;&amp; !window.requestAnimationFrame; ++x) {
          window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
          window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
      }
  
      if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
          var currTime = new Date().getTime();
          var timeToCall = Math.max(0, 16 - (currTime - lastTime));
          var id = window.setTimeout(function () {
              callback(currTime + timeToCall);
          },
          timeToCall);
          lastTime = currTime + timeToCall;
          return id;
      };
  
      if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
          clearTimeout(id);
      };
  }());
  //the below code is to generate Cylinder object -- Mahadevan
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  
  var degreeAngle = 0;
  requestAnimationFrame(animate);
  
  function drawRotatedCylinder(x, y, w, h, degreeAngle) {
      context.save();
      context.translate(x + w / 10, y + h / 10);
      context.rotate(degreeAngle * Math.PI / 180);
      drawCylinder(-w / 10, -h / 10, w, h);
      context.restore();
  }
  
  function drawCylinder(x, y, w, h) {
      context.beginPath(); //to draw the top circle
      for (var i = 0 * Math.PI; i &lt; 2 * Math.PI; i += 0.01) {
  
          xPos = (x + w / 2) - (w / 2 * Math.sin(i)) * Math.sin(0 * Math.PI) + (w / 2 * Math.cos(i)) * Math.cos(0 * Math.PI);
  
          yPos = (y + h / 8) + (h / 8 * Math.cos(i)) * Math.sin(0 * Math.PI) + (h / 8 * Math.sin(i)) * Math.cos(0 * Math.PI);
  
          if (i == 0) {
              context.moveTo(xPos, yPos);
          } else {
              context.lineTo(xPos, yPos);
          }
      }
      context.moveTo(x, y + h / 8);
      context.lineTo(x, y + h - h / 8);
  
      for (var i = 0 * Math.PI; i &lt; Math.PI; i += 0.01) {
          xPos = (x + w / 2) - (w / 2 * Math.sin(i)) * Math.sin(0 * Math.PI) + (w / 2 * Math.cos(i)) * Math.cos(0 * Math.PI);
          yPos = (y + h - h / 8) + (h / 8 * Math.cos(i)) * Math.sin(0 * Math.PI) + (h / 8 * Math.sin(i)) * Math.cos(0 * Math.PI);
  
          if (i == 0) {
              context.moveTo(xPos, yPos);
  
          } else {
              context.lineTo(xPos, yPos);
          }
      }
      context.moveTo(x + w, y + h / 8);
      context.lineTo(x + w, y + h - h / 8);
      context.strokeStyle = '#ff0000';
      context.stroke();
      context.fillStyle = 'yellow';
  
      context.fill();
  }
  
  function animate() {
      requestAnimationFrame(draw);
      context.animate({"Fill":yellow},Slow);      
      drawRotatedCylinder(100, 100, 180, 180);
  
      draw();
  }
  </code></pre>
  
  <p>When I gave context.animate line above drawRotateCylinder I am getting error </p>
  
  <p>Here I don't want to my rotatecylinder just an animation required when I enter Percentage value in the textbox filling the cylinder.</p>
  
  <p>Thank you in advance
  Maha</p>