My coding counting magic (it ain't easy)

<!doctype html> <html> <head> <title>Thalia's coding magic</title> <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>