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>