declaraciones que parecen no ejecutarse

[chwc]

hola que tal amigos !!
estaba experimentando con el elemento canvas y javascript, y me he estancado,
resulta que estoy haciendo una imagen con canvas, y hay varias rayas seguidas (200) que se crean en un loop, y tienen cada una distintas alturas y colores supuestamente, que se sacan con un random, pero parece que no cambia en nada

http://craii.com.ar/prueba1.htm

en esta pagina esta el siguiente pedazo de codigo

Código Javascript:

for(var n=0;n<200;n++){
    var x = Math.floor(Math.random()*69);
    var recta = ctx.createLinearGradient(0,0,0,x+30);
    recta.addColorStop(0,"rgba(0,255,"+Math.floor(Math.random()*255)+",1)");
    recta.addColorStop(1,"rgba(0,255,0,0)");
    ctx.fillStyle = recta;
    ctx.rect(10+(5*n),0,4,100);
    }
ctx.fill();
 

intentaba que cree distintas lineas, pero son todas iguales,
luego probe sacar una parte de el loop y dejarla afuera

http://craii.com.ar/prueba2.htm

Código Javascript:

var x = Math.floor(Math.random()*69);
    var recta = ctx.createLinearGradient(0,0,0,x+30);
    recta.addColorStop(0,"rgba(0,255,"+Math.floor(Math.random()*255)+",1)");
    recta.addColorStop(1,"rgba(0,255,0,0)");
    ctx.fillStyle = recta;
for(var n=0;n<200;n++){
    ctx.rect(10+(5*n),0,4,100);
    }
ctx.fill();
 

pero resulta que aún asi sigue haciendo lo mismo, deberia crear lineas diferentes en la primera prueba, pero no es asi.

saludos y espero su ayuda :D

[chwc]

ya lo he resuelto, tenia que usar la funcion fillRect en vez de fill

gracias igualmente