Ciao a tutti!

Non sono per nulla pratico delle nuove funzionalità di HTML5, anzi, è la prima volta in assoluto che mi cimento con questo nuovo liunguaggio.

Sostanzialmente ho deciso di fare un tentativo partendo da un'esigenza che ho:
Far comparire una linea orizzontale poco per volta.

Con qualche ricerca sul web sono riuscito a disegnare in maniera statica la linea in questione con questo codice:

codice:
<canvas id="iniziopath" width="600" height="200">
	 	</canvas>
		 <script>
		 var percorso = document.getElementById("iniziopath");
		 var context = percorso.getContext("2d");
		 context.beginPath();
		 context.moveTo(110, 150);
		 context.lineTo(200, 150);
		 context.lineWidth = 1;
		 context.stroke();
		 </script>
Dopodiché ho provato a sostituire
codice:
context.lineTo(200, 150);
con un ciclo for che mi disegnasse da (110,50) a (200,50), senza però ottenere il risultato sperato: la linea compare subito.

Io vorrei che si vedesse comparire la linea da sinistra a destra, con un movimento visibile.

Che voi sappiate esiste una funzione per fare qualcosa del genere?

Ho cercato un po' in giro (anche qui nel forum) senza trovare nulla.

Grazie per le risposte,

Ciao,
Enryb