Dessin de courbes animés (canvas)

Bonjour !

je réalise un projet, qui me demande de créer des courbes qui apparaissent aléatoirement (différentes trajectoires et différentes couleurs) sur sur un canvas de javascript.

J'ai ce code pour le moment qui n'a pas l'air de fonctionner, j'ai juste une courbe rouge affiché sur mon canvas, le but c'est qu'on l'a voit se creer, puis qu'une autre se créer ailleurs et ainsi de suite.. comment procéder ?

		var myInterval = set = setInterval(animate, 1000/10);

		var xPos = 0;
		var lineSpace = 90;
		var yPos = lineSpace;
		var mediumYPos = yPos;
		var margin = 20;

		function animate(){

			createANewLine();
			chekPos();

		}
		function chekPos(){

			if(xPos > canvas.width){
				xPos=0;
				mediumYPos += lineSpace;
				yPos+=lineSpace;

			
			if(yPos >= canvas.height- lineSpace/2){
				clearInterval(myInterval);
				}	
			} else if (xPos<0)
				xPos = 0;
		}
		function editPos(){

			//xPos += Math.random()*30+10;
			//yPos = yPos;
			//console.Log(xPos);

			var choice = Math.round(Math.random()*10);
			console.log(choice);

			if(choice > 7){

				var addon = Math.random()*30+10;

				var dice02 = Math.round(Math.random());
				//console.log(dice02);

				if(dice02>0){

					addon *= -1;
				}

					xPos += addon;
					yPos += addon;

			} else {

				xPos += Math.random()*30+10;
				yPos = yPos;
			}

			constrainPos();

		}

		function constrainPos(){

			var maxYPos = mediumYPos + (lineSpace-margin)/2
			varminYPos = mediumYPos - (lineSpace-margin)/2

			if(yPos>maxYPos){


			}
		}

		function DrawCurve(){

				context.lineWidth = 5
			;
				context.strokeStyle="red";
				context.beginPath();

				context.moveTo(xPos, yPos);

				editPos();

				context.quadraticCurveTo(cp1x, cp1y, destx, desty);

				context.closePath();

				context.stroke();

		}

}

Auriez vous une idée ?
Modifié par Sabsab (16 Apr 2017 - 11:17)