User:Thalia de Jong/counting

My coding counting magic (it ain't easy)

<canvas id="canvas" width="960" height="540" showsrc> var paint;

function draw(){

   c= document.getElementById("canvas");
   paint= c.getContext ("2d");

   paint.fillStyle="#3333CC";	
   paint.fillRect (0,0,960,540);

   paint.fillStyle="#FF0033";	
   drawredhair();

   paint.fillStyle="#33FF99";
   drawgreentail1();

   //How do I make a loop within a loop? I couldn't figure it out here and so I keep adding greentails. Seems a bit tedious...
   paint.fillStyle="#33FF99";
   drawgreentail2();

   paint.fillStyle="#33FF99";
   drawgreentail3();

   paint.fillStyle="#33FF99";
   drawgreentail4();

   paint.fillStyle="#33FF99";
   drawgreentail5();

}

function drawredhair(){ x= 480; y= 180; counter=1;

while (counter<200){ paint.fillRect(x,y,150,120); x=x+1; y=y-1/2; counter=counter+1; } }

function drawgreentail1(){ x=650; y=400; counter=1;

while (counter<30){ paint.fillRect(x,y,20,2); x=x+5; y=y+3; counter=counter+1; } }

function drawgreentail2(){ x=671; y=400; counter=1;

while (counter<28){ paint.fillRect(x,y,18,2); x=x+5; y=y+3; counter=counter+1;

   }

}

function drawgreentail3(){ x=690; y=400; counter=1;

while (counter<26){ paint.fillRect(x,y,16,2); x=x+5; y=y+3; counter=counter+1; } }

function drawgreentail4(){ x=707; y=400; counter=1;

while (counter<24){ paint.fillRect(x,y,14,2); x=x+5; y=y+3; counter=counter+1; } }

function drawgreentail5(){ x=722; y=400; counter=1;

while (counter<22){ paint.fillRect(x,y,14,2); x=x+5; y=y+3; counter=counter+1; } } </canvas>