Animate Canvas Fill() from bottom to top using JavaScript or jQuery

Question

I am working on the demo code below. How can I add animation to Canvas Fill() from bottom to top using JavaScript or jQuery?

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.fillStyle = "red";


setInterval(function(){ctx.fill() }, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

Answer 1

I don't know a proper way to do that without algorithm.

I made this algorithm which does what you want, i hope it will help you.

Tested on google chrome, you can play with thick and timeout parameter.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//Configuration
var myRect = {"x":20,"y":20,"w":150,"h":100}  //rect definition
timeInterval= 250;          //time between 2 draw
thick = 3;             //thickness of a line (pixel)
ctx.fillStyle = "red";  //color of the rect

var cpt = 0;

//loop will process fast but we make a delay on each draw with setTimeout which grow at each iteration
for(var ind = thick; ind < myRect.h+thick ; ind += thick){
  setTimeout(function(ind){
      drawLittleRect(ind)
  }, timeInterval*cpt, ind);
  cpt++
}

function drawLittleRect(ind){
  var tempY = myRect.y + myRect.h - ind;

  //Limit top of rect in order to get desired size
  if(tempY < myRect.y){
    tempY = myRect.y
  }
  ctx.fillRect(myRect.x, tempY,  myRect.w, thick);
}
</script>