My coding counting magic (it ain't easy)

<!doctype html>
<html>
	<head>
		<title>Thalia's coding magic</title> <!--dit is de tab titel-->
		<script>
		//confirm("Click OK if you're ready for magic!");
		
		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;
					}
					}
		</script>
	</head>
		<body onload= "draw()">
			<canvas id="canvas" width="960" height="540"style="border:10px solid #ff8cfd;"> 
			</canvas>
		</body>
</html>

<canvas id="canvas"> 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>