JQuery - Create a Flag by animation using Canvas and Div tag

Please use browser other than IE to see the animation present inside the circle because it is code in canvas tag.
Output :

Happy Independence Day

      In this article we are going to see how to animate with canvas in Div tag, It is used to draw graphics on the fly. Animate method is used to animate the given element and slide Down is used to slide down the element with timing.Here we are going to do a sample program with the following two elements to animate and draw a flag Canvas, Div and following three methods to do the actions animate, slideDown, SlideUp.

Click Here for CSS Source

Click Here for HTML Source

Click Here for JQuery Source

JQuery - Animate using Canvas in Div tag to Draw a Flag - (CSS Source)

CSS Source

<style type="text/css">

#sf

{width: 0px;

height: 0px; border-left-style: solid; border-left-color: #FF6633; border-right-style: solid; border-right-color: #FF6633; border-top-style: solid;border-top-color: #FF6633;border-bottom-style: none;border-bottom-color: #000000;

}

#wh{

border-bottom: medium solid ; margin: -20px auto auto 0px; width: 0px; height: 41px;border-left-color: lightgray;border-left-width: medium;border-right-color: Lightgray;border-right-width: medium;border-top-color: #FF6633;border-top-width: medium;border-bottom-style: none;border-top-style: solid;border-right-style: solid;border-left-style: solid;

}

.name

{

display:none;

color:deepskyblue;

font-size:25px;

margin: 25px auto auto 50px;

}

.bt{

border-top: medium solid green; border-bottom: medium none #000000; margin: 0px 0px auto auto; width: 0px; height: 0px;border-left-color: #000000;border-left-width: medium;border-right-color: #00FF00;border-right-width: medium;

}

#gr

{

width: 1px;

border-top: medium solid green; border-bottom: medium none #000000; margin: -20px auto auto 0px;  height: 40px;border-left-color: green;border-left-width: medium;border-right-color: green;border-right-width: medium;border-right-style: solid; border-left-style: solid;

}

.br

{

display:none;

border-style: none none none none; border-width: medium; border-color: #000000;height: 130px; width: 210px;margin: -350px 50px auto auto;

}

#rt

{

border-color: green; border-width: medium;  margin-left: 211px; width: 1px;height: 1px; border-left-style: solid;margin-top:-39px;

}

#c{

display:none;

}

#sfc

{

width:0px;

height:0px;

background-color:#FF6633;

}

#grc

{

width:0px;

height:0px;

background-color:green;

}

#s1

{

display:none;

}

#s2

{

display:none;

}

#s3

{

display:none;

}

#s4

{

display:none;

}

#s5

{

display:none;

}

#s6

{

display:none;

}

#s7

{

display:none;

}

#s8

{

display:none;

}

#s9

{

display:none;

}

#s10

{

display:none;

}

#s11

{

display:none;

}

#s12

{

display:none;

}

#s13

{

display:none;

}

#s14

{

display:none;

}

#s15

{

display:none;

}

#s16

{

display:none;

}

#s17

{

display:none;

}

#s18

{

display:none;

}

#s19

{

display:none;

}

#s20

{

display:none;

}

#s21

{

display:none;

}

#s22

{

display:none;

}

#s23

{

display:none;

}

#s24

{

display:none;

}

#s25

{

display:none;

}

#stick

{

border-style: none solid none none; border-width: 12px; border-color: #000000;height: 1px; width:25px;border-color:#B1B8B7;

}</style>

Click Here for Output

Click Here for HTML Source

Click Here for JQuery Source