HTML5 animare un canvas con javascript

[NLSweb]

Scusate in anticipo se questa non e' l'area corretta per questa discussione , ma non ho trovato una sezione dedicata al html5; la discussione riguarda all'utilizzo delle funzioni canvas e all;utilizzo di javascript per animarle.
ho creato un piccolo esempio: http://nlsweb.altervista.org/cinque.html
dove con la funzione setInterval cerco di disegnare in modo animato una semplice curva.
il problema e' che il disegno e' alterato ..
il risultato finale dovrebbe essere questo:

ctx.moveTo(200,400);
ctx.quadraticCurveTo(250,350,200,300);
ctx.stroke();

io non faccio altro che incrementare o decrementare le variabile che disegnano la curva all'interno di un ciclo temporale.
ma come dicevo prima il disegno risulta sbagliato..
Se qualcuno puo' darmi qualche consiglio per capire dove e' l'errore ... grazie in anticipo.

[karl94]

Il tuo problema è che non cancelli quello che hai disegnato nel fotogramma precedente, ma sovrapponi il tutto.

[NLSweb]

Il tuo problema è che non cancelli quello che hai disegnato nel fotogramma precedente, ma sovrapponi il tutto.

hai perfettamente ragione.. ho aggiunto clearRect e adesso funziona .. ancora non sono molto soddisfatto dell'animazione , ma funziona decisamente meglio ! Grazie tante !

[NLSweb]

sto provando a creare delle scritte animate con <canvas> e javascript

in questa pagina : http://nlsweb.altervista.org/nuovahome.html

fino a quando uso le linee , quindi lineTo() , nessun problema

quando invece provo a fare degli archi , quindi arc() , ho diversi problemi...

in particolare quando disegno un semiarco quindi da 0.5*Math.PI,1.5*Math.PI (sia in senso orario che antiorario)

la variabile xx che identifica eAngle , parte da 0.5 e si incrementa di 0.1 fino ad arrivare a 1.5

il problema e' proprio qui.. guardando con il debbuger sembra che la variabile non si inizializzi ..

la cosa strana e che ho provato questa variante di codice con un ciclo di for e funziona

for(x=0.5;x<1.5;x+=0.1){
disegno.beginPath();
disegno.arc(150,150,100,0.5*Math.PI,x*Math.PI);
disegno.stroke();
}

quindi il problema e' altrove .. ma ancora non capisco dove...

se gentilemnte potete aiutarmi .

Vi ringrazio anticipatamente .

[NLSweb]

ho spostato il codice qui
http://nlsweb.altervista.org/provaascrivere.html